Bootstrap 5 的 ratio 工具类仅支持固定比例，不响应视口断点变化；其通过 padding-top 百分比实现，比例值写死，需手动配合媒体查询或改用原生 aspect-ratio 实现响应式适配。
Bootstrap 5 的 ratio 工具类只支持固定比例，不响应视口宽度变化
Bootstrap 5 内置的 ratio 类（如 ratio-16x9、ratio-4x3）本质是通过 padding-top 百分比 + position: relative + position: absolute 子元素实现的。它能稳定维持宽高比，但这个“百分比”是相对于父容器宽度计算的——也就是说，只要父容器宽度随屏幕缩放，内部比例就跟着缩放，**视觉上看起来是“响应式”的，但比例值本身是写死的、不可变的**。
常见误用现象：<div class="ratio ratio-16x9"><iframe></div> 在手机上显示过窄、文字挤成一团，不是因为比例失效，而是因为 16:9 容器被压缩后，内部 iframe 的内容（比如 YouTube 页面）自身也有最小宽度限制，导致横向滚动或裁切。
- 它不感知屏幕断点，
ratio-16x9在 xs 和 xl 下都一样生效，无法像col-md-6那样按需切换 - 它要求子元素必须是
position: absolute且填满（通常靠top-0 start-0 w-100 h-100），否则留白或错位 - 若父容器宽度为
auto或受flex压缩影响（如放在col里但没设min-width），padding-top计算可能失准，出现高度塌陷
想在不同断点用不同纵横比？得手动覆盖 padding-top
Bootstrap 没提供 ratio-md-4x3 这类响应式比例类，必须自己补 CSS。核心是利用断点媒体查询重写 padding-top 值：
.my-ratio {
position: relative;
width: 100%;
}
.my-ratio::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.my-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<p>@media (max-width: 767.98px) {
.my-ratio::before {
padding-top: 100%; /<em> 手机端改 1:1 </em>/
}
}
@media (min-width: 992px) {
.my-ratio::before {
padding-top: 40%; /<em> 大屏用 5:2，更扁平 </em>/
}
}注意：不能直接在 ratio 类上叠加断点前缀（如 md:ratio-1x1），Bootstrap 5 的工具类不支持这种写法；也不能用 style="padding-top:..." 内联，否则无法响应断点。
- 必须用伪元素或额外子 div 控制 padding，否则无法脱离内容流影响布局
- 若用 Sass，可封装 mixin 自动产出各断点版本，避免重复写 media query
- 慎用
vh/vmin替代百分比——它们会让比例脱离父容器约束，容易在小屏触发垂直滚动
替代方案：用 aspect-ratio CSS 属性更简洁，但兼容性有限
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，写法极简：
<div class="d-flex justify-content-center align-items-center" style="aspect-ratio: 16/9; width: 100%;"> <img src="..." class="w-100 h-100 object-fit-cover"> </div>
优点是语义清晰、无需伪元素、可直接响应父宽；缺点是 IE 完全不支持，旧版 Safari（≤15.3）会忽略，且部分安卓 WebView 表现不稳定。
- 若项目需兼容 iOS 15.0–15.3 或 Android 10 以下 WebView，仍得 fallback 到
ratio+ 伪元素方案 -
aspect-ratio与max-width/min-height共用时，优先级需测试确认，某些场景下会被覆盖 - 它不解决内容居中问题——仍需配合
d-flex或object-fit控制子元素渲染
实际选型关键看两点：是否要降级兼容，以及比例是否真需要“响应”
多数业务场景中，“响应式纵横比”的真实需求其实是：在桌面保持 16:9，在平板横屏切 4:3，在手机切 1:1。这本质上不是“连续响应”，而是“离散断点适配”——此时手写媒体查询 + padding-top 最可控。
而如果只是希望视频容器随父容器缩放、同时不被拉伸变形，那原生 aspect-ratio 加 object-fit: cover 就足够，代码量少、维护成本低。
最容易被忽略的一点：无论用哪种方案，**父容器必须有明确宽度来源**。常见坑是把 ratio 直接丢进 col 却没设 min-width，或嵌套在 flex 里未加 flex-shrink: 0，导致比例计算基准丢失，高度突然归零。
