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/

转载于:https://www.cnblogs.com/qdlhj/p/9938707.html