CSS aspect-ratio：比例盒与媒体适配

---

title: CSS aspect-ratio：比例盒与媒体适配

keywords:

• aspect-ratio
• 比例盒
• 媒体适配
• 响应式
• 占位

description: 使用 aspect-ratio 构建稳定的比例盒，适配图片与视频容器，减少布局跳变并提升响应式表现。

categories:

• 文章资讯
• 编程技术

---

概述

aspect-ratio 指定元素的宽高比，自动计算另一维度，适合媒体容器与卡片缩略图，避免 CLS。

用法/示例

.media { aspect-ratio: 16 / 9; width: 100% }
.avatar { aspect-ratio: 1 / 1; height: 48px }

工程建议

• 为媒体容器与占位骨架声明比例，结合 object-fit 控制裁剪与适配。
• 在栅格与容器查询中配合比例调整细节，保持一致排版。
• 为旧环境提供固定尺寸或使用内边距占位技巧。

参考与验证

• MDN：aspect-ratio — https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
• web.dev：Aspect ratio — https://web.dev/articles/aspect-ratio