响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时，如果想要图片按比例缩放，最简单的就是把img宽度设为100%，不设置高度，高度就会自动跟着宽度缩放，但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等，然而图片尺寸不是这个比例，又不想让图片拉伸变形，自动裁剪掉两边多余部分、这该如何解决呢？
代码
HTML部分
1
<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>
CSS部分
1
2
3
4
5
6
7
8
9
10
11
.zoomImage{
width:100%;
height: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;
}
原理剖析
1
2
3
4
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
样式中的上面4句主要目的是为了让这个div以1：1的大小呈现，虽然高度为0，但是它的padding值为100%，这是因为在padding为百分比的时候，是根据他父层的宽度来进行计算的。在一点MDN关于padding的文档也有说到。
1
2
3
4
5
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
后面5句利用了CSS3中的background-size:cover的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。对于padding为百分比的时候，我画了一张图，希望有助于大家理解：
总结
你所需要的比例就是width与padding-bottom的比例，用的时候，直接把.zoomImage当成img标签来用就可以了。