video { aspect-ratio: 16 / 9 } 完全无效，因 video 是替换元素，浏览器按其元数据或内联宽高属性决定尺寸，忽略 CSS 的 aspect-ratio；必须用块级/弹性/网格容器包裹，设明确宽度、不声明 height，并移除 video 内联宽高属性，配合 object-fit 才能生效。
不能直接给 <video> 写 aspect-ratio，必须用容器包裹并满足三个硬性条件，否则高度塌陷、CLS（布局偏移）不可避免。
为什么 video { aspect-ratio: 16 / 9 } 完全没反应
因为 <video> 是替换元素（replaced element），浏览器按其元数据或 HTML width/height 属性决定固有尺寸，aspect-ratio 对它完全被忽略。你在 DevTools 里看到该声明被划掉，不是写错了，是规范行为。
常见错误现象包括：
-
<video>高度为 0，只显示一条细线 - 宽度正常但高度没撑开，上下大片黑边
- 视频加载完成瞬间“跳高”，触发 CLS
aspect-ratio 生效的三个必要条件
浏览器只在同时满足以下三点时，才会根据比例推导高度：
立即学习“前端免费学习笔记（深入）”；
- 容器
display必须是block、flex或grid（不能是inline或未显式声明） - 容器必须有明确宽度来源：比如
width: 100%、max-width: 400px、flex-basis: 300px - 容器不能声明任何
height，包括height: auto、height: 100%—— 只要写了，浏览器就跳过比例计算
例如这个写法会失效：.wrapper { aspect-ratio: 16 / 9; height: auto; }；而这个才有效：.wrapper { width: 100%; aspect-ratio: 16 / 9; }。
完整可用的最小实现（含 object-fit 和内联属性清理）
仅设容器比例还不够，里面 <video> 的渲染行为必须显式控制，否则仍会拉伸或留黑边：
- 移除
<video>标签上的width和height属性（如width="640" height="360"），否则覆盖 CSS 计算 - 容器设
width: 100%+aspect-ratio: 16 / 9 -
<video>设width: 100%+height: 100%+object-fit: cover（或contain，按需选）
示例代码：
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}注意：如果父容器是 Flex/Grid 且子项设置了 align-items: stretch，可能强行撑高容器，覆盖比例——此时需加 align-self: start 重置。
Safari 15.3 及更早版本不支持怎么办
Safari 15.3（macOS Monterey）及更早版本完全忽略 aspect-ratio，且无降级警告。真机测试不可跳过，尤其企业内网或教育场景。
必须 fallback 到 padding-bottom hack：
- 容器设
position: relative、width: 100%、height: 0 -
padding-bottom: calc((9 / 16) * 100%)→ 即56.25% -
<video>设position: absolute、top: 0、left: 0、width: 100%、height: 100%
最易被忽略的一点：别依赖文件名猜比例（比如 cover-16x9.jpg 不代表实际就是 16:9），务必用真实元数据或服务端校验。
