PROMULGATOR

    LJL

    上海市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
<div class="box">
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x300-1.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x500-1.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/300x500-1.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x300-2.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x500-2.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/300x500-2.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x300-3.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/500x500-3.png)"></div>
    <div class="zoomImage" style="background-image:url(http://www.jq22.com/img/cs/300x500-3.png)"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
    width:100%;
}
.zoomImage {
    float:left;
    width:40%;
    height:0;
    margin:0 20px 20px 0;
    padding-bottom:100%;
    overflow:hidden;
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

纯css实现图片比例缩放自动裁剪

width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;

样式中的上面四句主要目的是为了让这个div以1：1的大小呈现， 虽然height：0；高度为0，但是它的padding值为100% 这是因为在padding为百分比的时候，是根据他父层的宽度来进行计算的。

background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;

后面5句就是利用了css3中的 background-size:cover 的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

0