如何正确指定图片宽高以避免CLS（累积布局偏移）？

以下是几种兼顾防止累积布局偏移（CLS）和保持响应式的可行方案：

方案一：原生属性+CSS自适应 #

给img标签设置原始的width和height属性（提供宽高比信息），再配合CSS让图片自适应容器。浏览器会根据宽高比提前计算占位空间，避免CLS，同时图片保持响应式。

内联样式写法：

<img src="image.webp" width="150" height="200" style="max-width: 100%; height: auto;">

类样式写法（更规范）：

.responsive-img {
  max-width: 100%;
  height: auto;
}

<img src="image.webp" width="150" height="200" class="responsive-img">

方案二：使用CSS aspect-ratio 属性 #

如果不需要兼容IE等旧浏览器，直接用aspect-ratio定义图片宽高比，配合width:100%实现自适应，浏览器会提前预留对应比例空间，解决CLS问题。

.responsive-img {
  width: 100%;
  aspect-ratio: 3/4; /* 对应150:200的宽高比，即宽度/高度=3/4 */
  object-fit: cover; /* 可选，防止图片拉伸，保持比例填充容器 */
}

<img src="image.webp" class="responsive-img">

方案三：容器包裹预留空间 #

用容器元素通过padding-top百分比（基于父元素宽度计算）模拟宽高比，再将图片绝对定位填充容器，兼容性适配所有浏览器。

.img-container {
  position: relative;
  width: 100%;
  padding-top: 133.33%; /* 计算方式：(高度/宽度)*100% = 200/150*100% = 133.33% */
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，控制图片缩放方式 */
}

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

内容的提问来源于stack exchange，提问作者Péter Gergő