ratio-16x9 必须作用于容器而非 img 元素本身，需配合 div.ratio.ratio-16x9 + img.w-100.h-100.object-fit-cover 三层结构才能生效，单独加在 img 上无效。
为什么 ratio-16x9 单独加在 <img> 上没反应
因为 ratio-16x9 是作用于**容器**的类，不是给媒体元素本身用的。Bootstrap 的 .ratio 系统依赖父容器通过 ::before 伪元素撑高，子元素必须是块级、无 margin、且显式设 width: 100%; height: 100% 才能填满这个比例空间。
常见错误包括：
- 直接写
<img src="x.jpg" class="ratio-16x9">—— 类名被忽略，图片仍按原始尺寸渲染 - 只加
<div class="ratio"><img></div>，漏掉ratio-16x9或其他比值类 ——.ratio本身不定义任何比例 - 子
<img>没加w-100 h-100，或用了img-fluid但没配object-fit—— 图片会拉伸或溢出
正确结构：容器 + 比值类 + 子元素宽高控制
标准写法必须三层配合：
<div class="ratio ratio-16x9"> <img src="cover.jpg" class="w-100 h-100 object-fit-cover"> </div>
其中：
-
ratio提供position: relative和overflow: hidden -
ratio-16x9注入--bs-aspect-ratio: 56.25%（即 9/16），用于伪元素高度计算 -
w-100 h-100让图片强制填满容器，这是比例生效的前提 -
object-fit-cover防止变形，确保内容居中裁剪；若需完整显示，改用object-fit-contain
和 img-fluid 能不能一起用
可以，但要注意职责分离：img-fluid 解决「缩放不溢出」，ratio-16x9 解决「容器高度不塌陷」。两者目标不同，常共存：
- 如果只用
img-fluid，图片会等比缩放，但父容器高度由图片内容决定 —— 加载慢或失败时高度为 0，导致布局跳动 - 如果只用
ratio-16x9+w-100 h-100，容器高度稳定，但图片若原始尺寸小，会被拉伸模糊 - 推荐组合：
<div class="ratio ratio-16x9"><img src="x.jpg" class="w-100 h-100 img-fluid object-fit-cover"></div>——img-fluid在这里其实冗余（因w-100 h-100已覆盖），但保留也无害
自定义比例如 9:16（竖屏）怎么写
Bootstrap 5.3+ 不提供 ratio-9x16 这类预设类，得手动注入 CSS 变量：
<div class="ratio" style="--bs-aspect-ratio: 177.78%;"> <video class="w-100 h-100"></video> </div>
计算方式是 height / width × 100%，9:16 → 16 / 9 ≈ 1.7778 → 177.78%。注意：
- 不要写成
--bs-aspect-ratio: 9/16—— Bootstrap 内部用的是百分比值，不是分数 - 避免在
style里写带单位的值（如177.78px），只接受无单位数字加% - 响应式场景下，可用媒体查询重设该变量，例如横屏切回 16:9：
@media (orientation: landscape) { .my-ratio { --bs-aspect-ratio: 56.25%; } }
真正容易被忽略的点是：当容器处于 display: none 状态下初始化 ratio 结构时，padding-top 计算会失效，导致后续显示时高度为 0。遇到 Tab 切换、Modal 弹出后比例异常，优先检查是否在可见状态下挂载，而不是硬调 offsetHeight 强制回流。
