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

概述 `aspect-ratio` 允许元素根据设定的宽高比进行尺寸计算，常用于图片/视频占位与卡片布局，避免资源加载前后高度变化引发 CLS。 示例 ```css .media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover } .avatar { aspect-ratio: 1 / 1; width: 64px } ``` 工程建议 - 与图片协作：配合 `` 或 CSS 设置 `aspect-ratio`，确保占位稳定。 - 响应布局：与容器查询/`clamp()` 搭配控制宽度与比率；避免极端拉伸。 - 兼容：不支持时回退到内联尺寸或包裹容器伪元素占位。 参考与验证 - MDN aspect-ratio 文档：https://developer.mozilla.org/docs/Web/CSS/aspect-ratio - web.dev 布局稳定指南：https://web.dev/articles/cls