img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

<style>

    .item{

        width:600px;

        height:500px;

        float:left;

        background-color:black;

    }

    body:after{

        content:"";

        display:block;

        clear:both;

    }

</style>

</head>

<body>

<div class="item"><img src="img/720x480.jpg" /></div>

<div class="item"><img src="img/snack.jpg" /></div>

<script type="text/javascript" src="js/jquery.js"></script>

<script>

    $(function () {

        /*

           定义jQuery插件 imageSize

           使用方式

           $("容器").imageSize("contain") 或 $("容器").imageSize("cover")

        */

        $.fn.imageSize = function (type) {

            this.each(function () {

                var This = $(this),

                    $img = This.find(">img"),

                    box_width = This.width(),

                    box_height = This.height();

                getRealImageSize($img.attr("src"), function (w, h) {

                    if (type == "contain") {//跟background-size:contain一样效果

                        if (box_width / box_height <= w / h) {

                            $img.css({ width: "100%", height: "auto", paddingTop: ((box_height - box_width * h / w) / 2) + "px" });

                        }

                        else {

                            $img.css({ height: "100%", width: "auto", paddingLeft: ((box_width - box_height * w / h) / 2) + "px" });

                        }

                    } else if (type == "cover") {//跟background-size:cover一样效果

                        This.css("overflow", "hidden");

                        if (box_width / box_height <= w / h) {

                            $img.css({ width: "auto", height: "100%" });

                        }

                        else {

                            $img.css({ height: "auto", width: "100%" });

                        }

                    } else {//无效果

                        This.css("overflow", "hidden");

                    }

                });

            });
            //引用自http://www.zhihu.com/question/28733200

            function getRealImageSize(url, callback) {

                var img = new Image();

                img.src = url;

                // 如果图片被缓存，则直接返回缓存数据

                if (img.complete) {

                    callback(img.width, img.height);

                } else {

                    // 完全加载完毕的事件

                    img.onload = function () {

                        callback(img.width, img.height);

                    }

                }

            }

        };

        /*

        开始调用插件

        */

        $(".item").imageSize("contain");

    });

</script>

</body>

</html>

img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover的更多相关文章

  1. 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  2. 子元素scroll父元素容器不跟随滚动JS实现

    仅供参考: function parentNotRoll($id){ var flg;//标记滚动方向,true-向下,false-向上 var $test = document.getElement ...

  3. python检查字典元素是否存在类似php中isset()方法

    PHP中isset()方法来检查数组元素是否存在,在Python中无对应函数,在Python中一般可以通过异常来处理数组元素不存在的情况,而无须事先检查 Python的编程理念是“包容错误”而不是“严 ...

  4. grid布局笔记学习一之父元素（容器）

    HTML代码: <div id="box"> <div class="lbox box1" style="background: # ...

  5. css等比例分割父级容器（完美三等分）

    html部分代码: 方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比) 方法二:行内元素(inline-block)+百分比 方法三: 父元素  disp ...

  6. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  7. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  8. CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  9. 关于子元素的margin-top对父级容器无效

    如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...

随机推荐

  1. Spring-test使用JUnit时，测试类autowired报错，create bean error

    Spring-test使用JUnit时,测试类里面使用autowired会报错, 报create bean error...... 但是controller里面@autowired可以正常运行的. 在 ...

  2. SQL处理数组，字符串转换为数组

    原文转载自:http://hi.baidu.com/gagahjt/item/fd081316450f05028ebde413 一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串 ...

  3. JS学习：第二周——NO.1回调函数

    [回调函数] 定义:把一个函数的定义阶段,作为参数,传给另一个函数: 回调函数调用次数,取决于条件: 回调函数可以传参: 回调函数可以给变this指向,默认是window: 回调函数没有返回值,for ...

  4. Html to Pdf 的另类解决方案

    Background 项目里要求将一个HTML页面(支付结果)生成pdf文档.页面有图片,有表格,貌似开源的iTextSharp应付不了. 在一番搜索之后,找到了wkhtmltopdf,一个命令行的开 ...

  5. Lambda 表达式[MSDN]

    Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数.Lambda 表达式对于编写 LINQ 查 ...

  6. pycharm2016 激活

    pycharm 2016 专业版 激活方式选第二种 code 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibG ...

  7. InstallSheild的一些常量

    在用InstallShield制作安装包的时候,我们经常需要用到一些常量,弄清楚这些常量的具体含义,可以方便我们灵活使用脚本. TARGETDIR  默认安装路径,在安装过程中用户可手动更改.如:安装 ...

  8. Clang与libc++abi库安装

    系统ubuntu64位 Clang4.0 参考: 1 https://github.com/yangyangwithgnu/use_vim_as_ide#0.1 其中 第7章 工具链集成 2. htt ...

  9. 修复win10升级时断电inaccessible boot device

    代码提示0xc0000001 这里的解决方法对系统以及个人的没有文件丢失的影响,没有重装以及重置上丢失东西的顾虑 解决方法: WINDOWS/system32/config/RegBack/SYSTE ...

  10. 解决Eclipse Failed to write core dump. Minidumps are not enabled by default on client versions

    -XX:+CreateMinidumpOnCrash 如果还有问题,就只能看日志了 T_T