aspect-ratio 不生效是因为需同时满足“宽度可测”和“高度未被锁定”两个前提，否则浏览器静默忽略导致高度坍缩为0；video等替换元素不支持该属性，须用外层容器+padding-bottom兜底兼容旧版Safari。
直接写 aspect-ratio 不会生效，必须同时满足「宽度可测 + 高度未被锁定」两个前提，否则浏览器静默忽略，容器高度坍缩为 0。
为什么 aspect-ratio 写了却没高度？
它不是设置固定尺寸的属性，而是告诉浏览器：“宽度已知时，请按比例算出高度”。一旦宽度不可测（比如父容器是 display: inline-block 且无 width），或你写了 height、min-height、max-height，浏览器就认为高度已确定，直接跳过计算。
- DevTools 里看到
aspect-ratio被划掉 → 大概率是 Safari 15.3 及更早版本不支持，或存在height: auto等冲突声明 - Flex/Grid 子项中失效常见原因：
flex: 0 0 auto或align-items: stretch强行撑高，覆盖比例逻辑 - 只写
aspect-ratio: 16 / 9没配width或max-width→ 容器宽度为 0，高度也为 0
aspect-ratio 在 video 元素上无效
video 是替换元素（replaced element），它的宽高比由视频文件元数据决定，aspect-ratio 对它完全不生效。你在标签上直接写 aspect-ratio: 16 / 9，浏览器会按规范忽略。
- 现象：页面加载瞬间
video高度为 0，只显示一条细线；横竖屏切换后比例错乱，CLS 明显 - 正确做法：用外层容器设
width: 100%和aspect-ratio: 16 / 9，再让video填满它 -
video标签本身必须清空内联width和height属性（如width="640"） -
video需设width: 100%、height: 100%、object-fit: cover（或contain）
兼容性兜底必须做，不能只靠 @supports
Safari 15.3 及更早版本完全忽略 aspect-ratio，且不报任何警告。国内大量微信 WebView、企业内网环境仍运行在此类旧内核上。
- 推荐 fallback 方案：容器设
position: relative、width: 100%、height: 0，加padding-bottom: 56.25%（16:9）；video设position: absolute、top: 0、left: 0、width: 100%、height: 100% -
@supports (aspect-ratio: 1 / 1)可用于包裹新方案，但不能替代真机测试 - 别依赖文件名判断比例（如
cover-16x9.jpg不代表就是 16:9），实际比例应以服务端返回或视频元数据为准
最易被忽略的一点：即使容器比例锁住了，object-fit 漏配或图片/文字未约束，内容照样溢出或拉伸——aspect-ratio 只管“框”，不管“里面怎么放”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
