CSS百分比padding制作图片自适应布局

<div class="banner">
 <img src="/UploadFiles/2021-04-02/">

.banner元素同样负责控制比例，然后图片填充.banner元素即可，CSS代码如下：


.banner {
 padding: 15.15% 0 0;
 position: relative;
}
.banner > img {
 position: absolute;
 width: 100%; height: 100%;
 left: 0; top: 0;
}



效果就达成了！
眼见为实，去年起点中文网手机版诸多页面的通栏广告就都是这么实现的，最终的效果参见下面的gif截图（如果图无法显示，可以评论反馈）：

可以看到，无论屏幕宽度多宽，我们的广告图片比例都是固定的，不会有任何剪裁，不会有任何区域缺失，布局就显得非常有弹性，也更健壮。
————-
其实，我之前一直低估百分比padding的实际应用价值，因为有vw单位的存在，毕竟理解vw看上去要更简单一些，所以，一直就没做相关技巧的介绍。但是，随着图片相关布局处理越来越多，我发现，百分比padding的实用价值要比想象的大，要比vw单位适用场景更多，兼容性更好（百分比特性IE6+支持，图片100%覆盖IE8+支持）。
对于复杂布局，如果图片的宽度是不固定的自适应的，我们通常会想到这么一个取巧的做法，就是只设定图片的宽度，例如：


img { width: 100%; }



此时浏览器默认会保持图片比例显示，图片宽度大了，高度也跟着一起变大；图片宽度小了，高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。
然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。
所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！
缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：

此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动，其核心HTML和CSS代码如下：

<div class="works-item-t">
  <img src="/UploadFiles/2021-04-02/150x200.png">



.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;
}