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. Redis实战阅读笔记——第二章

    在性能的要求下,如何获取重构之前的构件

  2. Create a new Windows service on windows server2012

    netsh http add iplisten ipaddress=0.0.0.0:15901 sc.exe create "FPPService" binPath= " ...

  3. 关于BCGControlbar16.1版本的安装与使用

    csdn上有BCGControlbar16.1版本的下载,地址:http://download.csdn.net/detail/wangxiangdong_sl/4821726带key,个人亲测VS2 ...

  4. Android基础 : Android ContentProvider

    Android 应用程序通过ContentProvider实现方式统一的数据共享功能. 外界的程序通过ContentResolver接口可以访问ContentProvider提供的数据,在Activi ...

  5. C# 中的委托和事件

    觉得这篇文章写的非常好,大神之作,由简入繁,对我这种初学者来说帮忙很大,特此留存下. 摘自:http://tracefact.net/CSharp-Programming/Delegates-and- ...

  6. 【webGL】threejs入门 ---创建一个简单立方体

    开发环境 Three.js是一个JavaScript库,所以,你可以使用平时开发JavaScript应用的环境开发Three.js应用.如果你没什么偏好的话,我会推荐Komodo IDE. 调试建议使 ...

  7. Python实现简单的Web完整版（一）

    在拖了一周之后,今天终于在一个小时之内将一个迷你的Web写出来了,最近改其它项目的bug头好大,但是好喜欢这样的状态. 黑色的12月,所有的任务都聚集在了12月,然后期末考试也顾不上好好复习了,但是但 ...

  8. HTML 保存图片到本地

    具体方法有两种  一种是 利用canvas的 toDataUrl  和Html5 里面的 <a>标签里面的 Download 属性 虽然 Download 的兼容性不怎么样  但是在文章后 ...

  9. hbase1.2.4 伪分布式安装

    注意:在安装hbase或者hadoop的时候,要注意hadoop和hbase的对应关系.如果版本不对应可能造成系统的不稳定和一些其他的问题.在hbase的lib目录下可以看到hadoop对应jar文件 ...

  10. android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

    <activity android:name="xxxActivity" android:configChanges="keyboard|keyboardHidde ...