如何预占动态尺寸图片加载前空间，避免页面布局偏移？

由于你在服务端渲染时已经知道图片的原始尺寸，核心思路是利用图片的宽高比预占空间，既不会固定死宽高影响响应式，又能避免图片加载前后的布局跳动。下面是两种实用方案：

方案一：Padding-Top 百分比法（兼容性强） #

这个方法利用CSS中padding百分比基于父元素宽度计算的特性，通过容器的padding-top值来模拟图片的高度，实现响应式预占空间。

步骤： #

1. 给图片包裹一个容器，设置相对定位和宽度100%（确保自适应父容器宽度）
2. 根据图片原始尺寸计算宽高比：(图片高度 / 图片宽度) * 100%，将这个值设为容器的padding-top
3. 图片设置绝对定位，铺满容器，同时用object-fit保持比例

代码示例： #

假设图片原始宽800px，高600px，宽高比为75%：

<div class="image-wrapper">
  <img src="image.jpeg" alt="图片描述" />
</div>

.image-wrapper {
  position: relative;
  width: 100%;
  /* 动态计算的宽高比：600/800*100% = 75% */
  padding-top: 75%;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保持图片比例完整显示，按需替换为cover（填充容器）或none（原尺寸） */
  object-fit: contain;
}

SSR渲染时，可以在服务端动态计算每个图片的宽高比，把padding-top的值直接写入元素的style属性，适配不同图片。

方案二：CSS Aspect-Ratio 属性（现代浏览器首选） #

现代浏览器支持aspect-ratio属性，可以直接指定元素的宽高比，写法更简洁。

代码示例： #

同样以宽800px、高600px的图片为例：

<div class="image-wrapper">
  <img src="image.jpeg" alt="图片描述" />
</div>

.image-wrapper {
  width: 100%;
  /* 直接设置宽高比：宽度/高度 */
  aspect-ratio: 800/600;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

也可以直接给img标签设置：

<img src="image.jpeg" alt="图片描述" style="width: 100%; aspect-ratio: 800/600;" />

注意： #

• aspect-ratio需要Chrome 88+、Firefox 89+及以上版本支持，如果要兼容老浏览器，优先用方案一
• object-fit的取值根据需求选择：contain保持比例完整显示、cover填充容器（裁剪部分区域）、none严格显示原尺寸（可能超出容器）

内容的提问来源于stack exchange，提问作者Saad Farooq