CSS aspect-ratio：稳定布局与媒体占位

---

title: CSS aspect-ratio：稳定布局与媒体占位

keywords:

• aspect-ratio
• 布局稳定
• 图片占位
• CLS
• 响应式

description: 介绍 aspect-ratio 的语法与应用，在图片/视频/卡片等场景提前保留尺寸占位，减少布局抖动（CLS），并与响应式策略协作。

categories:

• 文章资讯
• 编程技术

---

概述

aspect-ratio 允许元素根据设定的宽高比进行尺寸计算，常用于图片/视频占位与卡片布局，避免资源加载前后高度变化引发 CLS。

示例

.media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover }
.avatar { aspect-ratio: 1 / 1; width: 64px }

工程建议

• 与图片协作：配合 <img width height> 或 CSS 设置 aspect-ratio，确保占位稳定。
• 响应布局：与容器查询/clamp() 搭配控制宽度与比率；避免极端拉伸。
• 兼容：不支持时回退到内联尺寸或包裹容器伪元素占位。

参考与验证

• MDN aspect-ratio 文档：https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
• web.dev 布局稳定指南：https://web.dev/articles/cls