Origin from https://blog.csdn.net/oulihong123/article/details/54601030

图片按比例响应式缩放、并自动裁剪的css

响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时，如果想要图片按比例缩放，

最简单的就是把img宽度设为100%，不设置高度，高度就会自动跟着高度缩放

这篇文章解决的问题就是，让图片的宽高要按一定的比例显示，如1：1 、4：3 ，也就是高度也要自定义

DIV:


		<div class="zoomImage" style="background-image:url(images/test1.jpg)">

css :


	.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;

	}

height：0；高度为0，但是它的padding值为100% ,也就是1：1 缩放，若要4:3 或者其它比值，修改百分比即可