使用 CSS 纵横比防止累积布局偏移

了解累积布局偏移

累积布局偏移 (CLS) 是 Google 衡量视觉稳定性的 Core Web Vitals 指标之一。它量化了用户经历意外布局变化的频率。高 CLS 分数会损害用户体验和 SEO 排名。主要原因是？媒体元素（图像、视频、iframe）加载时无需保留空间。

CSS 纵横比如何工作

aspect-ratio CSS 属性允许您声明任何元素的宽度与高度的比率。浏览器会相应地预留空间，防止内容加载时布局跳转。

/* Reserve a 16:9 aspect ratio */
.responsive-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

语法很直观：aspect-ratio: <width> / <height>。您还可以使用十进制值，其中 aspect-ratio: 2 相当于 2 / 1。

防止图像布局变化

在 aspect-ratio 之前，开发人员使用 padding-bottom hack 来预留空间。现在就简单多了：

/* Traditional padding-bottom hack (old way) */
.image-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

/* Modern aspect-ratio (new way) */
.image-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

对于响应式图像，请将 aspect-ratio 与 max-width 结合起来：

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

最后一种方法使用图像的本机尺寸 - 如果 <img> 具有 width="800" 和 height="600"，则浏览器会自动计算 aspect-ratio: 800 / 600。

视频和 iframe

来自 YouTube、Vimeo 或其他平台的嵌入内容特别容易导致 CLS。 aspect-ratio 属性干净地处理这些：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

与 max-width 结合以实现响应式大小调整

常见的模式是具有响应式宽度约束的固定纵横比：

.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
}

object-fit: cover 确保图像填充容器而不失真。

对核心 Web 生命体的性能影响

正确使用长宽比可直接提高 CLS 分数：

场景	CLS 分数	评级
未设置比例，图像加载较晚	0.25	0.25可怜
填充底部黑客	0.05	0.05好
CSS 纵横比	0.02	0.02优秀
纵横比 + 宽度/高度属性	0.01	0.01完美