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. select中文字垂直居中解决办法

    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...

  2. LPC1768\1769之中断优先级与中断优先级组

    一.背景 USB在持续通信几十万次后,会出现USB IN中断丢失几次的情况,分析是中断优先级不够高,导 致USB中断在排队,然而排队还未完成,又有新的USB中断发生,致使其中断丢失.LPC1769的所 ...

  3. eclipse安装spring的插件

    第一步:插件下载 http://spring.io/tools/sts/all 安装包链接 第二步:插件安装 第三步:安装成功检测

  4. VSTO PowerPoint 代码删除Shape后再恢复出现无法再次获取的问题

    做PowerPoint的VSTO插件项目,遇到个很奇怪的问题,当代码执行删除某些Shape时,没问题,但是操作Undo也就是恢复后,无法再次获取到之前删除的对象,这种情况只在Office2007中出现 ...

  5. TCP/IP 协议中的滑动窗口

    一个例子明白发送缓冲区.接受缓冲区.滑动窗口协议之间的关系. 在上面的几篇文章中简单介绍了上述几个概念在TCP网络编程中的关系,也对应了几个基本socket系统调用的几个行为,这里再列举一个例子,由于 ...

  6. Windows无线网“无法连接到这个网络”的解决办法

    最近我的笔记本(Win10系统)连接无线网时总是出现"无法连接到这个网络"的错误.为此折腾了一天,通过各种百度,终于找到了适合我的解决办法,在此记录一下. 问题描述 最近因为宿舍的 ...

  7. How the problem solved about " Dealing with non-fast-forward errors"

    Recently ,I got confused When I use  git to push one of my project. The problem is below: And I Foun ...

  8. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  9. 3D 素材路径

    https://3dwarehouse.sketchup.com/user.html?id=1058361951245355501624136&nav=likedcollections

  10. office 365 Sharepoint 2013

    平台环境: office 365 Sharepoint  2013 操作文件和文件夹 访问文档库的最佳方式是借助在 /_api/web 处可用的 GetFolderByServerRelativeUr ...