css利用padding百分比实现图片自适应高度

应用场景

宽高比率，实现图片自适应高度，防止图片加载过程高度为0，加载完图片高度撑起，它下面的div抖动问题

重点：CSS百分比padding都是相对宽度计算的

<div class="works-item-t"> ???<img src="./150x200.png"></div>

.works-item-t { ???padding-bottom: 133%; ???position: relative;}.works-item-t > img { ???position: absolute; ???width: 100%; height: 100%;}

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img>元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：

.img-box { ???padding: 0 50% 66.66% 0;}

参考网址：

https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/

css利用padding百分比实现图片自适应高度

原文地址：https://www.cnblogs.com/qdlhj/p/9938707.html