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

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

轉載于:https://www.cnblogs.com/websalon/p/3602324.html

總結

以上是生活随笔為你收集整理的通过padding-bottom或者padding-top实现等比缩放响应式图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。