aspect-ratio 是最干净的方案，但需 Chrome 88+、Firefox 89+、Safari 15.4+ 支持；在 Bootstrap 5.1+ 中需确保父容器不破坏 BFC、子元素正确定位且 display 合法，自定义比例推荐用 --bs-aspect-ratio 变量，兼容性要求高时应回退 padding-top。
直接用 aspect-ratio 是目前最干净的方案，但只在 Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持；Bootstrap 5.1+ 项目里若目标用户不需兼容 IE 或 iOS 14.5 以前设备，就该优先用它，而不是 fallback 的 padding-top 技巧。
为什么 aspect-ratio 在 Bootstrap 容器里不生效
常见现象是容器高度塌陷、子元素溢出、或完全没反应。根本原因不是 Bootstrap 封禁了该属性，而是它被套在了破坏块级格式化上下文（BFC）的结构中。
-
.row被手动设为display: block，导致其子项（.col）失去 flex item 的计算上下文 - 父容器有显式
height、min-height或max-height，覆盖了aspect-ratio的自动高度计算 - 目标元素本身
display值不合法：比如img默认是inline，必须显式设为block或inline-block - 某些自定义 CSS 重置了
box-sizing，或设置了overflow: hidden干扰尺寸渲染
如何正确使用 aspect-ratio 类（如 ratio-1x1）
Bootstrap 5.1+ 内置的 ratio 工具类已基于 aspect-ratio 实现，但它不是“开箱即用”，组合规则很刚性。
- 必须同时加
ratio和一个具体比例类，例如ratio ratio-16x9—— 单独写ratio不起作用 - 子元素（
iframe、video、img）必须加position-absolute top-0 start-0 w-100 h-100，否则不会填满 - 如果子元素是
<img alt="如何实现Bootstrap响应式等比例矩形_使用aspect-ratio的CSS新特性" >，还要确保它没被其他样式干扰，比如max-width: 100%与w-100冲突 - 不要在
display: none的父容器里初始化ratio结构；切换显示时，可用visibility: hidden替代，或等显示后再挂载
如何自定义非标准比例（如 21:9、2.35:1）
Bootstrap 没提供 ratio-21x9 这类类名，但你可以复用它的机制，通过 CSS 变量注入新比例值。
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 5.3+ 推荐写法：
<div class="ratio" style="--bs-aspect-ratio: 21/9;"> —— 注意斜杠前后**不能有空格**，<code>21 / 9无效 - 老版本（5.0–5.2）需覆盖伪元素：
.ratio-custom::before { padding-top: 42.857%; }，再配合ratio ratio-custom - 自定义类名必须以
ratio-开头，否则.ratio的基础样式不会匹配到它 - 别试图用
calc()动态算百分比：CSS 变量--bs-aspect-ratio只是字符串，var(--bs-aspect-ratio)不会做数学运算 - 需要支持 Safari iOS 14.4 及更早版本（
aspect-ratio在 iOS 14.5 才支持） - 父容器宽度可能动态变化（比如 sidebar 展开/折叠、Tab 切换后 resize），而你又不想手动触发重绘
- 容器内嵌的是第三方 iframe（如 YouTube），且无法控制其内部样式 ——
padding-top对这类内容更鲁棒 - 项目还在用 Bootstrap 5.0 之前版本，或团队明确禁用原生 CSS 新特性
什么时候必须退回 padding-top 方案
不是所有场景都能靠 aspect-ratio 解决。以下情况 fallback 是更稳的选择：
真正容易被忽略的点是：现代浏览器下 aspect-ratio 看似简洁，但它对父级布局约束极敏感；而 padding-top 虽冗长，却在 flex/grid 混合结构中反而更扛折腾。选哪个，取决于你敢不敢为“简洁”承担调试成本。
