aspect-ratio 必须作用于 video 的父容器而非 video 本身，因 video 是替换元素，其宽高比由元数据决定，CSS 该属性对其无效；正确做法是用 div 包裹并设 aspect-ratio: 16 / 9、width: 100%，video 设 width: 100%; height: 100%; object-fit: cover，并移除内联宽高属性。
因为 aspect-ratio 是浏览器原生盒模型级控制，能在 DOM 解析阶段就锁定容器空间，从根源上避免 CLS（布局偏移）——而 padding-top 等 JS 或伪元素方案都依赖宽度推算高度，时机晚、上下文敏感、易失效。
video 元素上写 aspect-ratio: 16 / 9 为什么一定无效
video 是替换元素（replaced element），它的宽高由视频元数据决定，CSS 的 aspect-ratio 属性对其完全不生效。浏览器会直接忽略该声明，开发者工具中显示为 “inactive”。这不是语法错误，是规范行为。常见现象包括：
- 页面刚加载时
video高度为 0，只显示一行像素 - 宽度正常但上下留大片空白，或横向拉伸成细条
- Safari 15.4–16.3 在
display: flex父容器中彻底不计算高度
必须用容器包裹并设 aspect-ratio 的三个硬性条件
仅加一层 <div class="video-wrapper"> 不够，漏掉任一条件都会导致比例失控或 CLS：
-
.video-wrapper必须设width: 100%（或明确的max-width），单独写aspect-ratio: 16 / 9会导致容器塌陷 -
video标签必须移除所有内联width和height属性（如width="640"），否则会覆盖 CSS 控制 - 容器不能设
height，否则与aspect-ratio冲突，高度计算异常
object-fit 加了没变化？原因和写法全在这儿
object-fit 只在父容器有明确宽高时才起作用。如果 .video-wrapper 高度靠内容撑开（比如没设 aspect-ratio 或它被忽略），object-fit 就无从生效。
立即学习“前端免费学习笔记（深入）”；
-
video必须设width: 100%; height: 100%，才能填满容器 - 推荐加
overflow: hidden到 wrapper，防止object-fit: cover失效时边缘溢出 - 若 wrapper 在
display: flex容器中，还需加flex-shrink: 0或min-width: 0，否则默认min-width: auto会锁死缩放
兼容旧浏览器的降级必须用 @supports 包裹
Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好，但 iOS Safari 15.3 及更早版本会完全忽略 aspect-ratio，导致容器高度为 0 —— 这时若降级样式和新样式平级写，旧浏览器会回退到无约束状态，CLS 更严重。
- 现代写法必须用
@supports (aspect-ratio: 1 / 1)包裹 - 降级方案用
@supports not (aspect-ratio: 1 / 1)包裹padding-top: 56.25%+position: relative/absolute - 分数必须写成
16 / 9，不能写16:9（非法）或1.777（精度误差易引发 1px 黑边）
真正容易被忽略的是：所有尺寸逻辑必须在 DOM 解析阶段完成，不能依赖 JS 计算、不能等视频元数据加载、也不能靠回退。否则 CLS 无法避免。
