應用場景

寬高比率，實現圖片自適應高度，防止圖片載入過程高度為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/