ratio-4x3 必须与 ratio 容器类配合使用，且子元素需显式占满宽高并设置 object-fit；单独使用无效，因 padding-top 依赖 ratio 基础类和正确 css 变量计算。
ratio-4x3 类本身不生效，必须和 ratio 容器类一起用，且子元素得显式占满宽高——单独加 ratio-4x3 没任何效果。
为什么 ratio-4x3 加了没反应？
因为 ratio 是基础容器修饰类，ratio-4x3 是比例定义类，二者缺一不可。它不是给图片或视频直接加的样式，而是作用于外层 <div> 容器。
<ul>
<li>只写 <code><div class="ratio-4x3"><img></div>：漏掉 ratio，padding-top 不触发
<div class="ratio"><img></div>：没指定比例，CSS 变量 --bs-aspect-ratio 为空，无计算依据<img> 没设 class="w-100 h-100" 或等效样式：子元素不绝对定位+拉满，就无法覆盖 padding-top 留出的空间display: none 状态下渲染了 ratio 结构：宽度为 0，padding-top: 75% 算出来是 0px，高度塌缩
ratio-4x3 子元素怎么写才不溢出、不变形？
4:3 容器里放图片或视频，光撑满不够，还得控制内容裁剪方式。默认拉伸会糊，留白又难看。
-
<img>必须加object-fit: cover（推荐）或object-fit: contain，否则原始宽高比不匹配时会拉伸或上下/左右留白 -
<img>需要position: relative; z-index: 1，避免被伪元素遮挡（尤其配合占位背景时） -
<video></video>同样要w-100 h-100，且建议加object-fit: cover+object-position: center居中裁剪 - 别在
<img>上写width/heightHTML 属性，会生成内联 style 覆盖响应式逻辑
移动端或 Tab 切换后 ratio-4x3 高度丢失怎么办？
这不是类写错了，是 padding-top: 75% 依赖父容器实时宽度计算。一旦宽度归零（比如隐藏态、刚切换的 tab），高度就没了。
- 避免在
display: none区域提前挂载ratio结构；改用visibility: hidden或等 DOM 可见后再渲染 - 父容器宽度可能动态变化（如 sidebar 展开、resize）时，手动触发重绘：
element.offsetHeight或element.style.transform = 'translateZ(0)' - 不要指望
max-width: 100%或vw单独修复——它们不参与padding-top的百分比基准计算 - 老版 Safari（iOS 14.5 之前）不支持
aspect-ratio，此时 fallback 的padding-top是唯一可靠路径，务必确保子元素用了position: absolute
真正容易被忽略的是：你改了子元素的 width 或 height，却没同步调整容器的 --bs-aspect-ratio 变量——比如把 4:3 改成 3:4，padding-top 还是 75%，结果就是高度错配。这时候不是删类，是得换算新值（3:4 → padding-top: 133.33%）并更新变量。
