必须作用于容器并配合width或max-width使用，否则浏览器因无宽度约束而标记aspect-ratio为“inactive”，导致高度塌陷、内容跳动；直接写在img/video上无效，flex/grid中需加flex-shrink:0或min-height:0保护。
直接结论：用 aspect-ratio 防布局偏移，必须作用于容器、必须配合 width 或 max-width、不能单独写，否则浏览器根本不会计算高度。
为什么只写 aspect-ratio: 16 / 9 没用
浏览器看到这个声明，但发现容器没有宽度约束（比如父容器是 display: flex 且没设 width），就会把它标记为 “inactive”——computed styles 里都看不到生效。结果就是容器高度塌成 0，图片或视频一加载，下面内容“啪”地往下跳。
常见错误现象：
- 给
<img>直接加aspect-ratio，实际无效（<img>是替换元素，不参与该属性的盒模型计算） - 在
flex子项里只写aspect-ratio，被flex-shrink: 1压缩掉比例 - 用
aspect-ratio但忘了删掉<video></video>标签上的width和height属性，两者冲突导致行为不可控
aspect-ratio 必须和什么一起用才生效
它不是独立尺寸声明，而是“比例计算器”，需要一个已知宽度才能算出高度。以下组合实测可靠：
-
width: 100%; aspect-ratio: 16 / 9;—— 最常用，容器随父级变宽，高度自动撑开 -
max-width: 100%; aspect-ratio: 4 / 3;—— 防止超大图撑破布局，尤其适合卡片类图片 -
width: 300px; aspect-ratio: 1 / 1;—— 固定宽度场景，如头像容器
注意：height: auto 对 aspect-ratio 无意义，别加；max-width: 100% 比 width: 100% 更安全，避免在窄屏下溢出。
响应式中怎么换比例而不引发跳动
不要用媒体查询把 aspect-ratio “删掉”或设为 auto，那等于退回到无约束状态，加载时照样跳。正确做法是覆盖：
@media (max-width: 768px) { .card { aspect-ratio: 4 / 5; } }- 后端能返回宽高比时，内联写：
style="aspect-ratio: ${w} / ${h};" - 无法预知比例时，按业务最大可能值预留（比如封面图用
21 / 9，而非硬套16 / 9）
Flex/Grid 容器里要额外加保护：
- Flex 子项：加
flex-shrink: 0; - Grid 子项：加
min-height: 0;（防止 grid 自动设最小高度干扰计算）
兼容旧浏览器的降级写法不能漏
Safari 15.4 之前不支持 aspect-ratio，但直接不写 fallback 会导致 CLS 更严重。必须用 @supports 包裹：
@supports not (aspect-ratio: 1 / 1) {
.ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.ratio-box > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}
关键点：降级方案里 padding-top 的百分比必须和新方案的 aspect-ratio 一致，否则断点切换时会跳。真正难的不是写对那一行 CSS，而是整条链路——API 是否传宽高、父容器是否意外限制了尺寸、JS 懒加载是否绕过了占位逻辑——漏掉任意一环，布局偏移就还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
