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

概述`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-ratioweb.dev 布局稳定指南：https://web.dev/articles/cls