aspect-ratio 防布局偏移需同时满足三条件：容器为块级/弹性/网格子项、有明确宽度、未声明 height；对 img/video 等替换元素无效，须套容器；旧浏览器需 @supports 降级并手动实现 padding-bottom 方案。
直接用 aspect-ratio 能防布局偏移，但只在容器上生效、只在宽度明确时起作用、只在较新浏览器里被识别——三者缺一，它就等于没写。
为什么给 <img> 或 <video></video> 直接加 aspect-ratio 没用
因为它们是替换元素（replaced element），浏览器按其固有尺寸和元数据渲染，aspect-ratio 对它们不参与盒模型计算。常见现象包括：
-
<img aspect-ratio="16/9">写在标签上，解析后高度仍是 0 或默认 inline 高度（约 20px） - 懒加载图片出现前，容器塌陷，下方文字突然下跳
- 写了
height: auto或height: 100%，CSS 优先级覆盖了aspect-ratio的推导逻辑
真正有效的方式是套一层容器：<div class="media-container"><img src="..."></div>，然后对 .media-container 设 aspect-ratio。
aspect-ratio 生效的三个硬性条件
浏览器必须同时满足以下三点，才会用宽高比推导出高度：
- 容器为块级、弹性或网格子项（如
display: block、display: flex、display: grid） - 有明确宽度来源（如
width: 100%、max-width: 480px、flex-basis: 300px） - 未声明任何
height（含height: auto、height: 100%）
语法也必须严格：aspect-ratio: 16 / 9（斜杠前后各一个空格），不能写成 16/9、16:9 或 16/9px。
旧浏览器兼容与降级 fallback 必须主动写
@supports (aspect-ratio: 1 / 1) 不是可选，是必配。iOS Safari 15.4+、Chrome Android 100+、Firefox Android 102+ 才原生支持；低于这些版本会静默忽略该属性，导致容器高度归零，CLS 更严重。
- 降级方案要用
padding-bottom百分比 +position: relative+ 绝对定位子元素 - 父容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（对应 16:9） - 子
<img>或<video></video>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别指望构建工具自动注入 fallback —— 必须手写
@supports not (aspect-ratio: 1 / 1)块，并验证真机表现
Flex/Grid 中容易失效的隐藏约束
在弹性或网格布局中，aspect-ratio 很可能被隐式规则压制：
- Flex 子项要加
flex-shrink: 0，否则内容挤压时比例失真 - Grid 子项要加
min-height: 0，否则 grid 自动设最小高度干扰计算 - 容器若用了
overflow: hidden但没配object-fit，内部图片仍可能溢出或拉伸，视觉上还是“跳” - 服务端返回的宽高比若动态变化，得用内联 style：
style="aspect-ratio: ${w} / ${h}"，不能全靠 CSS 类固定写死
最容易被忽略的是：aspect-ratio 只负责推导高度，它不管内容是否裁切、是否留白、是否撑破边界——这些全靠 object-fit、overflow 和子元素样式配合，漏掉任一环，布局抖动照常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
