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

概述

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