img-fluid不能保持固定宽高比，因其仅设max-width:100%和height:auto，不控制容器高度；必须用ratio类创建占位容器，再配合object-fit和w-100/h-100使图片填满且不拉伸。
为什么 img-fluid 不能保持固定宽高比
直接给 <img> 加 img-fluid 类只会让图片等比缩放并填满父容器宽度，但父容器自身高度由内容决定——图片加载后才撑开，无法提前锁定比例。真正要的是“容器先占位”，再把图片约束在里面，而不是靠图片反推容器尺寸。
用 ratio 工具类创建响应式比例容器
Bootstrap 5.1+ 内置了 ratio 工具类，原理是利用 padding-top 百分比基于宽度的特性（即 padding 百分比始终相对于父元素宽度计算），实现宽高比锁定。它不依赖 JS，纯 CSS，且自动响应式。
常见用法：
<div class="ratio ratio-16x9"><img src="..." class="object-fit-cover w-100 h-100"></div>- 支持预设比例：
ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9 - 必须配合
object-fit类（如object-fit-cover）和w-100 h-100才能让图片填满且不拉伸 - 容器内只能放一个子元素（通常是
<img>或<iframe></iframe>），多子元素会破坏 padding 占位逻辑
自定义比例时别漏掉 --bs-aspect-ratio CSS 变量
Bootstrap 5.3+ 允许用 CSS 变量覆盖默认比例，比如要做 3:2 容器：
<div class="ratio" style="--bs-aspect-ratio: 66.666%;"> @@##@@ </div>
注意：--bs-aspect-ratio 值是 高度 ÷ 宽度 × 100%，不是宽高比字符串。3:2 对应 2/3 ≈ 66.666%，不是 "3x2"；写成 3/2 或 150% 就会错。
兼容性提示：该变量在 Bootstrap 5.2+ 才稳定支持，旧版本需手动写 padding 规则或用 Sass 编译自定义类。
IE11 或需要更老兼容性的场景怎么处理
IE11 不支持 aspect-ratio 和 CSS 变量，ratio 类也会失效。此时得回退到传统 padding-top 技法：
<div class="position-relative" style="padding-top: 66.666%;"> @@##@@ </div>
关键点：
- 父容器设
position-relative+padding-top百分比（同上计算） - 图片设
position-absolute并四边归零，再用w-100 h-100拉满 - 务必加
object-fit-cover，否则图片会按原尺寸溢出或压缩变形 - 这种写法没有响应式语义，但所有浏览器都认
如果项目还在用 Bootstrap 4，那就没有 ratio 类，只能手写这类结构，或者用 Sass mixin 封装。
实际开发中，比例容器的“固定”是视觉意义上的——它不防图片加载抖动，也不解决懒加载占位问题。真要彻底稳住布局，得配合 loading="lazy" + 显式 width/height 属性，或者用 intrinsicsize（目前支持有限）。
