需求描述

网页中的图片如果只设置了宽度，没有设置高度，那么在网页加载完图片的一瞬间，会根据图片的原始宽高比和设定的宽度，来动态计算高度，这个时候页面就会“抖动”一下，因为图片所在的位置，之前的高度是为 0 的。

解决方案

要想解决页面加载图片时的抖动问题，用下面的方法就可以：

<!-- HTML -->
<div class="element">
  <div class="img-wrapper">
    <img src="...">
  </div>
</div>

/* CSS */
.element {
  width: 1em;
  width: 5%;
}

.element .img-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.element .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

最外层的 .element 元素，用于设置图片所需占据的宽度（和高度）。

中间的 .img-wrapper 元素，其 width 和 padding-top 属性结合起来，用于设置图片的宽高比，这里两个属性都是 100%，意味着图片的宽高比为 1:1。

这里之所以要在 .img-wrapper 元素外层再套一个 .element 元素，是因为 .img-wrapper 元素中的 padding-top 属性单位为 %，而这个百分比是以父元素的 width 为基准进行计算的，所以需要在最外层的 .element 元素中设置一个具体的 width 值，然后中间的 .img-wrapper 元素才能实现指定图片宽高比的效果。

参考资料

• 图片未加载时高度填充
• css技巧：防止页面加载图片时发生“抖动”
• 图片抖动问题的原因及解决办法