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

## 概述 `aspect-ratio` 指定元素的宽高比，自动计算另一维度，适合媒体容器与卡片缩略图，避免 CLS。 ## 用法/示例 ```css .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