aspect-ratio 直接作用于 无效，因它是替换元素，宽高受内联属性、固有尺寸等优先级更高规则覆盖；必须作用于容器，并配合 width: 100% 和 object-fit 才能正确约束显示区域。
aspect-ratio 直接加在 <video></video> 上基本无效，它必须用在容器上，且需配合 width: 100% 和 object-fit 才能真正约束显示区域。
为什么 aspect-ratio 加在 <video></video> 标签上没反应
<video></video> 是替换元素（replaced element），浏览器对其宽高控制逻辑特殊：内联 width/height、固有尺寸、甚至某些 autoplay 行为都会覆盖 aspect-ratio。Chrome 早期版本甚至完全忽略该属性作用于 <video></video>。即使现代浏览器支持，若未显式设 width: 100% 且 height: auto，比例仍可能被跳过。
- 常见现象：
<video class="aspect-ratio-16x9"></video>→ 视频按原始分辨率渲染，不随父容器缩放 - 根本原因：CSS
aspect-ratio对替换元素的兼容性弱于普通块级容器 - 安全做法：永远用
<div> 包一层，把 <code>aspect-ratio放在容器上ratio类和原生aspect-ratio的关键区别Bootstrap 5.3+ 的
.ratio类底层仍是伪元素::before+padding-top实现，不是直接用 CSSaspect-ratio属性——这意味着它兼容 IE11 以外所有现代浏览器，但写法更固定；而纯 CSSaspect-ratio: 16 / 9更简洁，但需自行处理 fallback（如旧版 Safari）。-
.ratio必须搭配具体比例类（如.ratio-16x9），否则--bs-aspect-ratio变量未定义，容器高度塌陷 - 纯
aspect-ratio可直接写在容器上：style="aspect-ratio: 16 / 9"，无需额外变量或类名 - 两者都要求子
<video></video>设width: 100%; height: 100%+object-fit: cover，否则留白或拉伸
自定义非标比例（如 9:16 竖屏）怎么写才可靠
9:16 不是 Bootstrap 内置比例，不能靠改类名蒙混过关。必须算出
height / width × 100%值，再注入变量或直接写aspect-ratio。- 9:16 →
16 / 9 × 100% ≈ 177.777778%，所以.ratio-9x16 { --bs-aspect-ratio: 177.777778%; } - 或更直接：
style="aspect-ratio: 9 / 16"（注意：这里是宽/高，不是高/宽） - 别用小数或百分比字符串混用：
--bs-aspect-ratio: 1.7778或177.78%都错，必须是a / b形式或百分比数值 - 自定义类必须在 Bootstrap CSS 之后加载，否则变量未生效
第三方 iframe（YouTube/Vimeo）嵌入时最常漏掉的一步
官方生成的嵌入代码自带
width="560" height="315"，这两个内联属性优先级高于 CSS 百分比，会直接让aspect-ratio或.ratio失效——容器被撑开，视频只占左上角一小块。- 必须手动删掉 iframe 的
width和height属性，只保留src、allow、loading等必要属性 - 删完后补上
class="w-100 h-100"（Bootstrap）或style="width:100%;height:100%"（纯 CSS） - 如果 iframe 内容本身有最小宽度限制（如 YouTube 播放器），窄屏下仍可能横向滚动，这不是比例问题，而是内容适配问题
真正容易被忽略的是：比例容器只管“高度预留”，不管“内容是否填满”。哪怕
aspect-ratio正确生效，漏掉object-fit或没设width/height: 100%，视频照样变形或露白边。 -
