之前同事說padding-bottom 可以實(shí)現(xiàn)等比縮放響應(yīng)式圖片，當(dāng)時(shí)忙，沒有好好看……

今天特意思考了下，實(shí)現(xiàn)的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%;}

實(shí)現(xiàn)的html代碼如下：

<div class="img-container"><img src="images/o_1.jpg" alt="" /> </div>

我理解實(shí)現(xiàn)方法解釋如下：

1、設(shè)置父元素div.img-containe的高度為0，設(shè)置padding-bottom的值為圖片的寬高百分比。
2、與子元素img相對(duì)父元素絕對(duì)定位，然后高度，寬度為百分之百，自然而然圖片的實(shí)際寬高是padding-bottom的值乘以父元素的實(shí)際寬度，從而實(shí)現(xiàn)等比縮放響應(yīng)式圖片。

實(shí)現(xiàn)原理：讓子元素寬高比例與父元素相同

轉(zhuǎn)載于:https://www.cnblogs.com/websalon/p/3602324.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。