Bootstrap 5.3+ 原生支持 aspect-ratio 属性，但需容器设该属性并配合 object-fit 填充图片；旧版浏览器不支持时须用 padding-top 百分比技巧模拟比例。
Bootstrap 5.3+ 直接支持 aspect-ratio，但需注意浏览器兼容性
Bootstrap 本身不提供专用的 aspect-ratio 工具类（如 .ratio-16x9），它依赖原生 CSS aspect-ratio 属性。这意味着你得自己写类或用内联样式，不能像旧版那样靠 padding-top 技巧“模拟”。
关键判断：如果你的项目需要支持 Chrome 88–、Firefox 89–、Safari 15.4– 或任何 iOS Safari aspect-ratio 会失效——这些浏览器压根不识别该属性。
- Chrome ≥ 88、Edge ≥ 88、Firefox ≥ 89、Safari ≥ 15.4 支持
aspect-ratio - iOS Safari 16.4+ 才开始支持；iOS 16.0–16.3 中即使声明了也完全无效
- Bootstrap 5.3 文档已明确将
aspect-ratio列为“现代布局基础”，但不作降级兜底
不用 JavaScript 的纯 CSS 响应式方案：用 aspect-ratio + width: 100%
这是最干净的做法，适用于图片、视频、iframe 等替换元素，或设置了 display: block 的容器。
典型错误是只写 aspect-ratio: 16/9 却没约束宽度，导致容器不随父级缩放。必须配合尺寸控制逻辑：
立即学习“前端免费学习笔记（深入）”；
- 容器需有明确的宽度上下文（比如父容器设了
max-width或col-*类） - 推荐写法：
width: 100%; aspect-ratio: 16/9;—— 这样高度自动计算，且能响应父级宽度变化 - 避免写
height: auto冲突：当aspect-ratio生效时，height值会被忽略，但显式设height: 0可能引发渲染异常 - 对 iframe，要额外加
border: none和vertical-align: middle消除基线留白
<div class="ratio-container" style="width: 100%; aspect-ratio: 4/3;"> <img src="photo.jpg" style="max-width:90%" alt="如何在Bootstrap中创建响应式长宽比容器_使用CSS Aspect-ratio" > </div>
需要兼容老浏览器？退回 padding-top 百分比技巧
这是 Bootstrap 5.2 及更早版本实际采用的方案（虽然没暴露成工具类），原理是利用子元素绝对定位 + 父容器 padding-top 占位来撑开高度。
容易踩的坑集中在百分比计算和定位失效上：
-
padding-top百分比是相对于父容器宽度计算的，所以必须确保父容器有明确宽度（不能是display: inline或未设width的 flex item） - 子元素必须用
position: absolute; top: 0; left: 0; width: 100%; height: 100%才能填满 - 常见错误：忘了给父容器设
position: relative，导致子元素脱离文档流后定位错乱 - 16:9 →
padding-top: 56.25%，4:3 →padding-top: 75%，1:1 →padding-top: 100%
<div class="ratio ratio-16x9">
<div class="ratio-content">
<iframe src="..."></iframe>
</div>
</div>
<p><style>
.ratio { position: relative; width: 100%; }
.ratio::before { content: ""; display: block; padding-top: 56.25%; }
.ratio-content {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
</style>用 Sass 自定义 Bootstrap 工具类生成 aspect-ratio 类
如果你用 Bootstrap 源码（Sass 版），可以扩展 $aspect-ratios map 并复用其工具类生成逻辑，避免手写一堆重复样式。
注意点在于 Bootstrap 默认的 ratio 工具类已被移除（5.3+），所以你得自己补全：
- 在自定义 Sass 文件中覆盖
$aspect-ratios，例如：$aspect-ratios: ( "1x1": 1/1, "4x3": 4/3, "16x9": 16/9 ); - 调用
@include aspect-ratio-utilities()（需确认你用的 Bootstrap 版本是否导出该 mixin；5.3.3+ 已内置但未默认启用） - 生成的类名是
.ratio-1x1、.ratio-16x9，行为是aspect-ratio: 16/9+width: 100% - 不要试图把
padding-top方案也塞进同一个类名里——CSS 不支持条件回退，得另起一套类名（如.ratio-fallback-16x9）
真正麻烦的不是写法，而是团队协作时没人检查目标浏览器版本，上线后发现 iOS 16.2 用户看到的是一条细线——因为 aspect-ratio 被整个忽略，又没 fallback。
