aspect-ratio 必须配合明确宽度（如 width: 100% 或 max-width）才能生效，单独使用会因无计算基准而塌陷；且不可直接用于 img/video 等替换元素，须由块级容器承载，并避免 height 声明、flex-shrink 压缩及旧浏览器兼容缺失。
直接用 aspect-ratio 配合明确的宽度控制，就能让容器在图片、视频或 iframe 加载前就预留出正确空间，从根源上避免布局跳动。不写它，光靠 width: 100% 或懒加载，抖动照旧。
为什么只写 aspect-ratio: 16 / 9 会失效
aspect-ratio 本身不决定尺寸，只定义比例；它必须依赖一个已知宽度才能算出对应高度。没有宽度约束时，浏览器无法推导，容器可能塌成一条线，或无限拉伸占满视口。
- ❌ 错误写法：
aspect-ratio: 16 / 9;单独使用，父容器又没设宽高 - ✅ 正确写法：
width: 100%; aspect-ratio: 16 / 9;或max-width: 400px; aspect-ratio: 4 / 3; - ⚠️ 注意：
height: auto和aspect-ratio同时存在时，前者会被忽略——但若容器是flex子项且未设flex-shrink: 0，aspect-ratio可能被压缩掉
img 和 video 上直接写 aspect-ratio 没用
img 和 video 是替换元素，其固有宽高比由资源元数据决定，CSS 的 aspect-ratio 对它们不生效。浏览器会忽略该声明，仍按默认尺寸（如 300×150）渲染，导致首次加载时明显下移。
- ✅ 正确做法：用
<div class="ratio-box"><img></div>，对.ratio-box设aspect-ratio和width: 100% - ✅
video同理，外层容器加display: block或display: grid，再配overflow: hidden和object-fit: cover - ⚠️ 别保留
<video width="640" height="360"></video>这类内联属性，它们会覆盖 CSS 控制，加剧抖动
Flex/Grid 中 aspect-ratio 容易被绕过
弹性布局和网格布局自带隐式最小尺寸限制（min-width: auto、min-height: auto），会阻止子项收缩到 aspect-ratio 所需尺寸，尤其在小屏或横竖屏切换时，容器高度归零或比例错乱。
- Flex 子项必须加：
flex-shrink: 0;（防止被压缩） +width: 100%; - Grid 子项必须加：
min-width: 0;+min-height: 0; - Grid 容器若嵌套在 Flex 里，也要加
min-width: 0;和min-height: 0;，否则整个 Grid 行可能“消失” - 响应式列数变化时，用
minmax(0, 1fr)替代1fr，确保轨道能真正收缩，触发列重排
兼容性与降级必须做，不能只靠 @supports
aspect-ratio 在 iOS Safari 15.4+、Chrome Android 100+ 才原生支持。低于这些版本（比如 iOS 15.2 真机或旧 WebView）会静默忽略该规则，容器塌陷，CLS 更严重。
- ✅ 降级方案：用
padding-top: 56.25%（16:9）+position: relative+ 绝对定位子元素，但要额外加top: 0; left: 0;防偏移 - ✅ 必须用
@supports (aspect-ratio: 1 / 1)包裹新写法，外部写降级样式，否则旧浏览器无 fallback - ⚠️ SSR 场景下，服务端必须返回图片宽高字段，模板中直接写
style="aspect-ratio: {{w}} / {{h}}"；靠 JS onload 补写，首屏必然跳动
真正难的不是那一行 aspect-ratio: 16 / 9，而是整条链路里：API 是否传了宽高、父容器是否意外限制了尺寸、Flex/Grid 是否漏了 min-width: 0、图片是否用了懒加载却没占位——漏掉任意一环，抖动就还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
