占位图加载时如何避免布局偏移？

Code°绍懿提问于 2026-03-23 10:46:22 阅读 31

优化

我在做图片懒加载，用了灰色占位图，但真实图片加载后页面还是会跳一下，怎么解决啊？

已经给 img 加了固定宽高，也试过用 aspect-ratio，但有些图片比例不一致，还是会有抖动。

这是我的写法：

<div class="img-wrapper">
  <img src="placeholder.svg" data-src="real-image.jpg" alt="" loading="lazy" />
</div>

CSS 里写了 .img-wrapper { width: 100%; height: 200px; }，但不同设备上图片宽高比变化大，硬设高度反而更糟……有没有通用点的方案？

我来解答赞 8 收藏

反馈

1 条解答

诸葛锡丹 Lv1

遇到这个问题，可以考虑使用 CSS 的 object-fit 属性来解决。首先确保你的图片容器有一个明确的宽高比，然后通过 object-fit: cover 来保持图片的比例不失真。这样即使图片加载进来，布局也不会发生偏移。以下是调整后的代码示例：

<div class="img-wrapper">

  <img src="placeholder.svg" data-src="real-image.jpg" alt="" loading="lazy" />

</div>

.img-wrapper {

  width: 100%;

  padding-top: 56.25%; /* 16:9 Aspect Ratio */

  position: relative;

  overflow: hidden;

}



.img-wrapper img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

这里的关键在于通过设置 padding-top 来定义一个固定的宽高比（比如 16:9）。这样无论图片的实际尺寸如何，都能保持容器的宽高比不变，从而避免布局偏移。效率更高，而且兼容性也不错。

2026-03-23 11:08