文章页的图片加载出来之前高度是 0，加载完成后下面的文字突然被往下推，正在看的内容跳走了。这个问题怎么解决？

图片加载时页面会跳一下，怎么避免？

这就是布局偏移（CLS）。只要浏览器在图片下载完成之前就知道它的宽高比，就会提前留出位置。

最简单的办法是给 img 写上图片的原始宽高，再配合 CSS 让它自适应：

HTML

<img src="/uploads/cover.webp" width="1200" height="675" alt="封面">

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

现代浏览器会根据 width 和 height 算出宽高比，在图片加载前就按这个比例占好位置。

宽高不确定，但希望统一显示成固定比例时（比如卡片封面），用 aspect-ratio 配合 object-fit：

CSS

.card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

同样的道理也适用于广告位、嵌入的视频和异步加载的模块：先给容器一个确定的高度或比例，内容加载完成后才不会把页面挤开。