Bootstrap 5 的 ratio 类通过 aspect-ratio 属性（含 padding-bottom fallback）控制容器宽高比，需配合比例类（如 ratio-16x9）和绝对定位子元素（如 position-absolute w-100 h-100）使用，支持自定义比例 via --bs-aspect-ratio 变量。
Bootstrap 5 的 ratio 类怎么用
Bootstrap 5 移除了旧版的 .embed-responsive 和 .embed-responsive-item，改用更简洁的 ratio 工具类。它本质是通过 CSS 的 aspect-ratio 属性（配合 fallback）控制容器宽高比，不再依赖 padding-top 偏移技巧。
直接在包裹容器上加 ratio 类 + 比例类即可，比如：
<div class="ratio ratio-16x9"> <iframe src="..." allowfullscreen></iframe> </div>
-
ratio类提供基础样式（position: relative、display: block），必须和比例类一起用 - 比例类如
ratio-16x9、ratio-4x3、ratio-1x1等，会设置aspect-ratio: 16/9（现代浏览器）+padding-bottomfallback（IE/旧 Safari） - 子元素需为
position: absolute; top: 0; left: 0; width: 100%; height: 100%才能撑满 ——iframe、video、img默认不满足，得手动加class="w-100 h-100"或自定义样式
为什么 iframe 在 ratio 容器里不显示或变形
这是最常踩的坑：Bootstrap 5 的 ratio 类只设父容器宽高比，不处理子元素自身尺寸逻辑。默认 iframe 是内联替换元素，有固有宽高，且不响应 width: 100% 和 height: 100%，除非显式定位。
- 必须给子元素加
position: absolute+ 四边归零 + 拉满宽高，推荐写法：class="position-absolute top-0 start-0 w-100 h-100" - 若子元素是
<video></video>或<img alt="Bootstrap 5如何实现响应式纵横比_使用CSS类ratio代替旧版布局" >，同样要加w-100 h-100，否则可能留白或裁切 - 部分老版本 Safari（iOS 14.5 之前）不支持
aspect-ratio，此时 fallback 的padding-bottom生效，但子元素若没position: absolute就会把内容往下顶出容器 —— 这就是“只看到顶部一小条”的原因
如何自定义非标准纵横比（比如 21:9 或 2.35:1）
Bootstrap 5 内置比例有限，但允许你用 --bs-aspect-ratio CSS 变量覆盖。只需在容器上加 style 或自定义类：
<div class="ratio" style="--bs-aspect-ratio: 21/9;"> <div class="position-absolute top-0 start-0 w-100 h-100">...</div> </div>
- 变量值必须是形如
a/b的分数字符串（不能是小数或百分比） - 注意斜杠前后不能有空格，
21 / 9无效，21/9才有效 - 如果需要复用，建议提取为 CSS 类：
.ratio-21x9 { --bs-aspect-ratio: 21/9; }，再搭配ratio - 自定义比例下，fallback 的
padding-bottom值由 Bootstrap JS 自动计算（基于该变量），所以无需手动算
和纯 CSS aspect-ratio 直接写的区别在哪
Bootstrap 的 ratio 不是简单封装 aspect-ratio，它做了两件事：一是注入 padding-bottom fallback（通过伪元素或直接写 inline style），二是强制子元素绝对定位流——而原生 aspect-ratio 只管容器自身，子元素布局完全交给你。
立即学习“前端免费学习笔记（深入）”；
- 如果你项目已放弃 IE 和 iOS ratio，直接：
style="aspect-ratio: 16/9; width: 100%;"，再配子元素width: 100%; height: 100%（对iframe仍需position: absolute） - 但
ratio的优势在于开箱即用的降级能力，且避免手写重复逻辑；缺点是多一层抽象，调试时容易忽略子元素定位要求 - 特别注意：当容器本身有
max-width或被 flex/grid 约束时，ratio容器的宽度可能被压缩，导致高度计算失准 —— 此时优先检查父容器的 layout 行为，而非ratio本身
ratio 失效，而是忘了给 iframe 加 position-absolute。 
