aspect-ratio不能直接写在video上，因其是替换元素，宽高比由视频元数据决定；必须用块级容器设width和aspect-ratio，并配object-fit控制内容填充，否则高度塌陷、cls跳动、横竖屏错位必然发生。
aspect-ratio 不能直接写在 <video></video> 上——写了也白写，浏览器会静默忽略。必须用块级容器包裹，并配 width 和 object-fit，否则高度塌陷、横竖屏错位、CLS 跳动全都会发生。
为什么 video { aspect-ratio: 16 / 9 } 不生效
<video></video> 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对其完全不参与计算。DevTools 里该声明常被标为 “inactive”，computed height 是 auto 或 0px。这不是你漏写了什么，是规范行为。
- 常见现象：页面加载瞬间视频只显示一条细线，或宽度正常但高度为 0
- Safari 15.4–16.3 在
flex容器中还有额外 bug，导致比例彻底崩坏 - 即使你写了
aspect-ratio: 16 / 9，只要没配width，容器仍可能塌成一条线——因为浏览器根本不知道“宽多少”，就无法算出“高多少”
必须的三要素：容器 + width + object-fit
稳定生效的最小组合就这三项，缺一不可：
-
.video-wrapper必须是块级容器：display: block或display: grid（避开 Safari flex bug） -
.video-wrapper上写：width: 100%（或max-width: 800px等明确宽度约束）+aspect-ratio: 16 / 9（注意斜杠前后各一个空格） -
<video></video>本身要移除所有 HTMLwidth和height属性（如width="640"），并设：width: 100%+height: 100%+object-fit: cover（或contain） - 务必加
overflow: hidden到 wrapper，防止object-fit: cover失效时内容溢出
兼容性兜底：旧版 Safari 和安卓 WebView 怎么办
截至 2026 年 10 月，iOS Safari 15.3 及更早、部分安卓 WebView（如 UC、Samsung Browser）仍完全忽略 aspect-ratio，且不报任何警告。只测最新 Chrome 是不够的。
- 降级方案必须用
@supports (aspect-ratio: 1 / 1)包裹现代样式，把 fallback 写在外部 - 最稳的兜底仍是
padding-top: 56.25%hack：父容器position: relative+padding-top: 56.25%，子<video></video>设position: absolute; inset: 0; width: 100%; height: 100% - 别写成
56%或56.2%——16:9 对应的是9 / 16 = 0.5625，少一位小数就偏形 - 若项目还要支持 IE 或极老内核，纯 CSS 就不够用了，得上 JS 动态读取视频元数据再设尺寸
object-fit 和 aspect-ratio 是两层事，不能只配一个
aspect-ratio 管容器盒子的尺寸比例，object-fit 管视频内容怎么填进这个盒子——两者解决的是不同层级的问题。
-
object-fit: contain：完整显示视频，上下/左右留黑边，适合教学类、需看清全部内容的场景 -
object-fit: cover：填满容器，裁剪边缘，适合背景视频或封面展示 - 漏掉
object-fit，视频默认会按原始宽高比拉伸，导致变形或留大片黑边；漏掉aspect-ratio，容器高度不可控，object-fit就失去意义 - 旧版安卓 WebView 中
object-fit支持不稳定，真机测试不可跳过
最容易被忽略的点是：aspect-ratio 必须依赖一个可测量的宽度方向约束才能触发计算，而这个约束往往被 flex/gird 的隐式规则（比如 min-width: auto）悄悄覆盖——所以遇到比例失效，先检查 wrapper 是否被父容器“锁死”了缩放空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
