aspect-ratio 用于在内容加载前预留容器正确尺寸以防止cls，需作用于有盒模型但无固有尺寸的块级/替换元素，配合 object-fit 控制内部媒体，并用 padding-top 技巧降级兼容旧浏览器。
用 aspect-ratio 锁定容器原始比例，核心是让浏览器在**内容加载前就预留正确尺寸**，从而避免图片、iframe 或异步组件加载后撑开空间引发的布局偏移（CLS）。关键不在“等加载完成”，而在“提前画好格子”。
确保父容器不依赖子内容撑开
如果容器本身没有宽高，仅靠子元素（如未设尺寸的 <img>）撑开，aspect-ratio 就无法生效——它只作用于**有渲染盒但无固有尺寸的块级/替换元素**。
- 给容器显式设
display: block或display: grid等触发盒模型的值 - 避免父级使用
height: auto且无其他高度约束（如min-height、flex限制） - 示例：一个卡片内嵌图片，应给卡片容器设
aspect-ratio: 16 / 9，而不是只给<img>设
配合 object-fit 或 width/height: 100% 控制内部媒体
aspect-ratio 只管容器盒子比例，不管里面的内容怎么铺。若内部是图片或视频，需额外控制其填充行为，否则可能拉伸或留白。
- 对
<img>或<video></video>，加width: 100%; height: 100%; object-fit: cover; - 若需保持原始宽高比缩放（不裁剪），用
object-fit: contain;并配background-color防空白 - 慎用
max-width: 100%单独设置，它可能破坏aspect-ratio的高度计算逻辑
处理响应式场景：用媒体查询覆盖而非删除 aspect-ratio
响应式中常需不同断点下不同比例（如桌面 16:9、移动端 4:5）。不要用 aspect-ratio: auto 清除，而应覆盖为新值——清除会导致回退到内容撑开，重蹈跳动覆辙。
- 写法示例：
.hero { aspect-ratio: 16 / 9; }<br>@media (max-width: 768px) { .hero { aspect-ratio: 4 / 5; } } - 避免：
@media (max-width: 768px) { .hero { aspect-ratio: auto; } }—— 这等于放弃保护
兼容性兜底：对不支持 aspect-ratio 的旧浏览器降级为 padding-top 技巧
目前 Safari 15.4+、Chrome 88+、Firefox 89+ 原生支持，但 iOS 15.0–15.3 和部分安卓 WebView 仍需兼容。此时用经典的 padding-top 百分比方案作为 fallback：
- 结构上用相对定位容器 + 绝对定位子元素
<div class="ratio-box"><img src="..."></div> - CSS：
.ratio-box { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ }<br>.ratio-box > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - 用
@supports not (aspect-ratio: 1)包裹现代写法，让旧浏览器走 fallback
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
