bootstrap 4 未支持 aspect-ratio 是因该属性在2018年发布时浏览器尚未兼容，故采用 padding-top 百分比 hack 实现比例容器；其 .embed-responsive 类依赖 position: relative + padding-top + absolute 定位子元素，专为 ie11、safari 12 等旧环境设计，与 bootstrap 5.3+ 的 aspect-ratio 原生方案机制不同且不可混用。
Bootstrap 4 为什么没加 aspect-ratio？
因为 Bootstrap 4 发布于 2018 年，而 aspect-ratio 直到 Chrome 88（2020 年底）、Firefox 89（2021 年中）、Safari 15.4（2022 年中）才陆续支持——Bootstrap 4 的维护周期早在 2022 年就已结束，官方明确不再新增 CSS 属性。它用的是当时唯一可靠的方案：padding-top 百分比 hack。
embed-responsive 类就是 aspect-ratio 的“前时代实现”
Bootstrap 4 的 .embed-responsive 及其子类（如 .embed-responsive-16by9）本质是靠 position: relative + padding-top: 56.25% 撑开容器高度，再用绝对定位把 <iframe></iframe> 或 <video></video> 填满。这不是“不先进”，而是当时唯一能在 IE11、Safari 12、旧 Android 浏览器里稳定工作的办法。
- 写
padding-top: 56.25%是因为高度 = 宽度 × 9/16，百分比基于父容器宽度计算 - 必须给子元素加
.embed-responsive-item并设position: absolute，否则内容会溢出或错位 - 这个方案在 Flex/Grid 容器里容易失效——因为
padding-top百分比只认块级父容器宽度，不认 flex item 的实际渲染宽
升级到 Bootstrap 5.3+ 才能直接用 aspect-ratio
Bootstrap 5.3（2023 年发布）开始将 aspect-ratio 列为“现代布局基础”，但它没提供像 .ratio-16x9 这样的工具类来自动注入该属性；你得自己写样式或内联 style="aspect-ratio: 16/9"。这意味着：
- 不能指望
class="ratio ratio-16x9"在 Bootstrap 4 里生效——那个类根本不存在 - 即使你在 Bootstrap 4 项目里手动加
aspect-ratio: 16/9，iOS Safari 15.3 及更早、Edge 91–102、部分微信内置浏览器仍会完全忽略它，导致容器塌陷 - 若强行降级兼容，
@supports (aspect-ratio: 1/1)在旧 Safari 里不可靠，得用@supports not (aspect-ratio: 1)来兜底
现在该怎么做？别混用两种逻辑
如果你还在维护 Bootstrap 4 项目，继续用 .embed-responsive 是最稳的选择；如果已升级到 Bootstrap 5.3+，就放弃 embed-responsive，改用 aspect-ratio + width: 100%。二者不能共存：
- 同时加
.embed-responsive-16by9和style="aspect-ratio: 16/9"会导致行为冲突：一个靠 padding 撑高，一个靠盒模型计算，结果取决于浏览器解析顺序和 display 类型 - Bootstrap 5.3 的
.ratio类内部其实做了双轨兼容：用aspect-ratio主力，再 fallback 到padding-top，但它要求子元素必须有position: absolute——这和 Bootstrap 4 的用法表面相似，底层机制完全不同 - 真正容易被忽略的点是：无论用哪种方案，
width必须可推导（比如width: 100%或父容器有col-6），否则aspect-ratio没基准，padding-top也没参照
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
