通過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的值乘以父元素的實際寬度，從而實現等比縮放響應式圖片。

實現原理：讓子元素寬高比例與父元素相同