直接给加.ratio类完全无效，因为.ratio是容器类，只作用于块级父元素（如），依赖::before伪元素和padding-top或--bs-aspect-ratio变量撑高；非块级容器且不支持该布局逻辑，会导致比例失控、仅显示左上角或塌陷成线。
为什么直接给 <video></video> 加 .ratio 类完全无效
因为 .ratio 是容器类，只对块级父元素（如 <div>）起作用，内部靠 <code>::before 伪元素 + padding-top 或 aspect-ratio 变量撑高。把 .ratio 直接加在 <video></video> 上，它既不是块级容器，也不支持伪元素布局逻辑，结果就是视频按固有尺寸渲染，比例彻底失控。
常见错误写法：<video class="ratio ratio-16x9"></video> → 页面只显示左上角一小块，或高度塌成一条线。
- 必须用
<div class="ratio ratio-16x9"> 包住 <code><video></video> -
<video></video>必须是该<div> 的**直接子元素** <li>不能嵌套中间层（比如 <code><div><video></video></div>），否则绝对定位失效 - 推荐写法（CSS 中）：
.ratio-21x9 { --bs-aspect-ratio: 42.857%; } - 类名必须以
.ratio-开头，否则.ratio::before选择器不匹配 - 自定义 CSS 必须在 Bootstrap 主样式表**之后加载**，否则变量未定义
- 若用内联方式：
<div class="ratio" style="--bs-aspect-ratio: 21/9;">（注意：这是分数形式 <code>21/9，不是百分比）子元素
<video></video>必须加哪些类才能填满且不变形.ratio只管容器高度，不管内容怎么贴合。漏掉任意一项，都会导致留黑边、拉伸、溢出或只显示一角。-
w-100 h-100—— 缺一不可；只写w-100会让高度按固有比例缩放，无法填满 -
position-absolute top-0 start-0—— 否则w-100 h-100在相对定位上下文中可能失效 -
object-fit-cover（Bootstrap 5.3+）或style="object-fit: cover;"—— 否则视频会拉伸或上下/左右留黑边 - 建议补
object-position: center，防止人脸被意外裁掉
完整结构示例：
<div class="ratio ratio-21x9"><video class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" controls></video></div>动态场景（Tab / Modal / AJAX）下
.ratio高度塌陷怎么办最常卡在这三个地方：容器初始
display: none、父宽度为 0、子元素未及时挂载。此时padding-top按 0 计算，高度直接归零。检查开发者工具里
.ratio-21x9::before是否渲染、padding-top值是否为42.857%，能快速定位问题。- 避免用
display: none控制显隐；改用visibility: hidden+position: absolute - Tab 切换后，手动触发一次
el.offsetHeight（读取 layout 属性），强制浏览器重算 - Modal 弹出后，确保视频容器 DOM 已插入且父容器有有效宽度再初始化
- YouTube/Vimeo 的
<iframe></iframe>必须删掉内联width和height属性，否则覆盖 CSS 百分比
真正难的不是写对类名，而是让浏览器在正确时机拿到父容器宽度并完成 layout 计算——这点在 JS 动态渲染中尤其容易被忽略。
-
.ratio-21x9 自定义类必须怎么写才生效
Bootstrap 5.3+ 内置了 .ratio-21x9，但如果你用的是 5.0–5.2，或需要其他非标比例（如 9x16），就得自己定义。关键不是“类名像不像”，而是 --bs-aspect-ratio 变量值是否准确且被正确读取。
21:9 对应的计算值是 9 / 21 × 100% ≈ 42.857%，这个小数位不能省略——写成 43% 或 42.86% 都会导致 padding 计算偏差，上下留白或裁切。
