aspect-ratio 不能直接作用于 <video> 标签，因其是替换元素，固有宽高比由视频元数据决定，CSS 的 aspect-ratio 对其无效；必须用块级容器包裹并配合 width 和 object-fit 才能正确维持比例。
aspect-ratio 不能直接写在 <video> 上——写了也白写，浏览器会静默忽略。必须用块级容器包裹，并配 width 和 object-fit，否则高度塌陷、横竖屏错位、CLS 跳动全都会发生。
为什么 video { aspect-ratio: 16 / 9 } 不生效
<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，容器仍可能塌成一条线——因为浏览器根本不知道“宽多少”，就无法算出“高多少” -
<video>标签上的 HTMLwidth和height属性（如width="640"）必须移除，否则会覆盖 CSS 控制 - 别给
<video>设固定height值，否则会覆盖aspect-ratio计算出的高度
.ratio 类必须作用于容器，不能加在 <video> 自身
Bootstrap 5 的 .ratio 是容器类，依赖 ::before 伪元素 + --bs-aspect-ratio 变量撑高。把 .ratio 直接加在 <video> 上，它既不是块级容器，也不支持 padding-top 布局逻辑，结果就是视频按默认尺寸渲染，比例失控。
立即学习“前端免费学习笔记（深入）”；
正确结构必须是：
<div class="ratio ratio-16x9"> <video class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" controls></video> </div>
-
.ratio必须和具体比例类（如.ratio-16x9）一起用，否则--bs-aspect-ratio未定义，高度塌陷 - 子
<video>必须加position-absolute+top-0 start-0+w-100 h-100，缺一不可 - 若项目用了 Bootstrap 5.3+，可用
object-fit-cover；否则需内联style="object-fit: cover" - 第三方 iframe（如 YouTube）同理，但需手动删掉嵌入代码里的
width="560" height="315"
兼容性兜底与自定义比例怎么写
截至 2026 年 10 月，iOS Safari 15.3 及更早、部分安卓 WebView（如 UC、Samsung Browser）仍完全忽略 aspect-ratio，且不报任何警告。只测最新 Chrome 是不够的。
降级方案必须用 @supports (aspect-ratio: 1 / 1) 包裹现代样式，把 fallback 写在外部：
@supports not (aspect-ratio: 1 / 1) {
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 → 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}- 别写成
56%或56.2%——少一位小数就偏形 - 自定义比例（如 9:16 竖屏）不能靠改类名，得自己写 CSS：
.ratio-9x16 { --bs-aspect-ratio: 177.777778%; }（注意是height / width × 100%，不是比值本身） - 类名必须以
.ratio-开头，否则伪元素选择器不匹配 - 动态场景（如 Modal、Tab 切换）中，
.ratio容器若初始display: none，会导致高度为 0；应改用visibility: hidden，或在显示后读一次offsetHeight强制重算
真正容易被忽略的是：容器没有明确宽度来源时，aspect-ratio 就是空转。Bootstrap 的 col 类（如 col 无数字后缀）默认 flex-basis: 0，容易导致宽度坍缩；必须用 col-6、w-50 或 max-width: 800px 这类带尺寸约束的类，给 aspect-ratio 提供锚点。
