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. shell test用法

    1)判断表达式 if test  (表达式为真) if test !表达式为假 test 表达式1 –a 表达式2                  两个表达式都为真 test 表达式1 –o 表达式 ...

  2. 基于Lease分布式系统重试服务选举

    /** * Copyright (c) 2015, www.cubbery.com. All rights reserved. */ package com.cubbery.event.retry; ...

  3. DOM0,DOM2,DOM3 事件基础知识

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  4. 库AFNetworking的使用

    库AFNetworking的使用 1.GET请求(html,json,xml) #pragma mark -GET请求 -(void)testGetRequset{ NSString *urlStri ...

  5. 关于ubuntu下sublime text 3 的安装和中文配置问题

    一.sublime text 3 在ubuntu 16.04下的安装过程 1)首先下载sublime text 3 的tar包 $ wget https://download.sublimetext. ...

  6. 第3月第21天 nsclassfromstring返回null SVN报错:clean the working copy and then retry the operation

    1. xcodeproj工程损坏时,.m文件没有加入编译. 2. SVN报错:clean the working copy and then retry the operation http://bl ...

  7. Sql Server创建函数

    在使用数据库的过程中,往往我们需要对有的数据先进行计算,然后再查询出来,所以我们就需要创建函数来完成这项任务,在数据库的Programmability(如图1)下面的Function中创建函数(如图2 ...

  8. 理解Attribute

    注:本文转载自http://kb.cnblogs.com/page/87531/ Attribute与Property 的翻译区别 Attribute 一般译作“特性”,Property 仍然译为“属 ...

  9. PHP之compact()函数

    PHP之compact()函数 compact()函数将变量转化为数组: <?php //直接调用函数 $a=1;$b=3;$c=4; var_dump($a,$b,$c); //自定义函数实现 ...

  10. Nagios

    什么是Nagios? Nagios是一款用于系统和网络监控的应用程序.它可以在你设定的条件下对主机和服务进行监控, 在状态变差和变好的时候给出告警信息. Nagios更进一步的特征包括: 1. 监控网 ...