之前同事说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代码如下：

我理解实现方法解释如下：

1、设置父元素div.img-containe的高度为0，设置padding-bottom的值为图片的宽高百分比。 2、与子元素img相对父元素绝对定位，然后高度，宽度为百分之百，自然而然图片的实际宽高是padding-bottom的值乘以父元素的实际宽度，从而实现等比缩放响应式图片。 实现原理：让子元素宽高比例与父元素相同