之前同事说padding-bottom 可以实现等比缩放响应式图片，当时忙，没有好好看……
今天特意思考了下，实现的css代码如下：
.img-container { position: relative; padding-bottom: 20%; height: 0; overflow: hidden; background: red; } .img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
实现的html代码如下：
<div class="img-container"> <img src="images/o_1.jpg" alt="" /> </div>
我理解实现方法解释如下：
1、设置父元素div.img-containe的高度为0，设置padding-bottom的值为图片的宽高百分比。
2、与子元素img相对父元素绝对定位，然后高度，宽度为百分之百，自然而然图片的实际宽高是padding-bottom的值乘以父元素的实际宽度，从而实现等比缩放响应式图片。
实现原理：让子元素宽高比例与父元素相同
通过padding-bottom或者padding-top实现等比缩放响应式图片,布布扣,bubuko.com
通过padding-bottom或者padding-top实现等比缩放响应式图片
原文：http://www.cnblogs.com/websalon/p/3602324.html