图片未加载时高度填充

场景

有些图片宽度确定，高度自适应，当图片未加载完成时，高度为 0，
加载完成后高度撑开，在这个过程中会引起页面闪烁抖动

思路

1. 默认情况下padding的百分比数值以父级元素的宽度作为参考
2. 获取图片的高宽比，如 100*50 的图片就是 20%
3. 将父元素宽度设置成图片最终宽度，高度不设置，利用padding-top填充高度，如padding-top: 20%

代码

加入希望一个图片宽度为 100%，高度自适应，图片像素为 1920x576

• html 结构

<div class="img-box">
  <img src="xxx.png" />
</div>

• css

.img-box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  padding-top: 30%; /* 主要是这行，数值为图片的高宽比 如576/1920=0.3 */
}
.img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

增加可控高度 max-height

还是以上面的 html 结构为例，css 增加伪类内容，用 padding 撑开高度

• css

.img-box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  max-height: 300px; /* 使用伪类撑开高度后，就可以在伪类父级里控制最大最小高度 */
  background: #3f3f3f; /*加个背景色 当图片加载慢时更清楚看到效果*/
}
.img-box:after {
  content: "";
  display: block;
  padding-bottom: 30%; /* 主要是这行，数值为图片的高宽比 如576/1920=0.3 */ /*padding-top或者padding-bottom都可以*/
}
.img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

演示

地址