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

应用场景

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

<div class="works-item-t">

    <img src="./150x200.png">

</div>

.works-item-t {

    padding-bottom: %;

    position: relative;

}

.works-item-t > img {

    position: absolute;

    width: %; height: %;

}

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

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

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

.img-box {

    padding:  % 66.66% ;

}

参考网址：

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

秒客网