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. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  2. Java界面设计 Swing(1)

    Java界面设计的用途 开发者可以通过Java SE开发丰富并且强大的具有图形界面的桌面应用程序.也可以设计一些提高效率的工具软件,帮助自己处理机械性工作. Java 的图形界面工具包,可以用于工具类 ...

  3. 【新手总结】在.Net项目中使用Redis作为缓存服务

    最近由于项目需要,在系统缓存服务部分上了redis,终于有机会在实际开发中玩一下,之前都是自己随便看看写写,很零碎也没沉淀下来什么,这次算是一个系统学习和实践过程的总结. 和Redis有关的基础知识 ...

  4. svn post-commit 同步

    @echo on SET REPOS=%1 SET USER=%2 SET SVN="D:\Program Files\VisualSVN Server\bin\svn.exe" ...

  5. 常用vim插件的安装、使用和管理

      1.Ctags Ctags工具是用来遍历源代码文件生成tags文件,这些tags文件能被编辑器或者其他工具用来快速查找定位源代码中的符号,入变量名,函数名等.比如,tags文件就是Taglist和 ...

  6. NOIP2016滚粗计

    啦啦啦,第一次写游记~ Day0 早上浪浪浪,开了几盘CS 坐车到衢州,在车上开了几盘 艾萨克,然而好困啊…… 到衢二后围观XJ杭二合力A ztr,不是很懂为什么事情会变成这样 晚上开杀人游戏,wcz ...

  7. WhatsApp的Erlang世界

    rick 的两个ppt整理 下载:2012 2013  ,使用半年erlang后,重新看这两个ppt才发现更多值的学习的地方,从ppt中整理如下: - Prefer os:timestamp to e ...

  8. 点击页面判断是否安装app并打开，否则跳转app store的方法

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...

  9. appium for hybrid app 处理webview

    之前研究了一段时间的appium for native app 相应的总结如下:                                            appium测试环境搭建 :ht ...

  10. Redis的入门及注意事项

    1.redis简介 Remote Dictionary Server Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保存在磁盘中, ...