通过padding-bottom或者padding-top实现等比缩放响应式图片

之前同事说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的值乘以父元素的实际宽度，从而实现等比缩放响应式图片。

实现原理：让子元素宽高比例与父元素相同