img-fluid 单独使用无效，因其仅设 max-width:100% 和 height:auto，不控制容器高度，易致布局抖动或溢出；需配合 ratio 类创建固定宽高比容器，并用 object-fit 控制图片填充方式。
直接加 img-fluid 不行——它只管“等比缩放到父宽”，不管容器有没有高度、图片会不会撑开布局。真正要的是容器先占位、图片再适配，否则小屏一缩就变形或溢出。
为什么 img-fluid 单独用会失效
它依赖 max-width: 100% 和 height: auto，但这两个规则完全不控制容器高度。图片加载前容器高度为 0，加载后突然撑开，导致布局抖动（CLS）；更关键的是，如果父容器是 flex 或没设宽度（比如裸 <div>），<code>max-width: 100% 就算不出有效值，图片可能塌缩或溢出。
- 别在
<img>上写width或height行内属性，会覆盖max-width: 100% -
img-fluid对<picture></picture>里的<img>无效，必须直接作用于<img>标签 - 父容器如果是
position: absolute或display: flex且未设宽，img-fluid失效概率极高
用 ratio 类创建固定比例容器
Bootstrap 5.1+ 的 ratio 是核心解法，靠伪元素 ::before 的 padding-top 百分比（基于父宽计算）实现纯 CSS 响应式宽高比锁定，不依赖 JS，也不受图片加载影响。
- 必须包裹在独立
<div> 里：<code><div class="ratio ratio-16x9"><img src="..." class="img-fluid"></div> - 预设类有：
ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9 - 自定义比例（如 3:2）得用 CSS 变量：
style="--bs-aspect-ratio: 66.666%;"（注意是高度÷宽度×100%，不是 "3x2"） -
ratio容器内只能有一个子元素，多图或文字需额外嵌套 - 填满裁剪（推荐封面/头像）：
<img class="w-100 h-100 object-fit-cover"> - 完整显示（适合图表/文档）：
<img class="w-100 h-100 object-fit-contain" style="max-width:90%"> - 绝对不要给
<img>加height、max-height或vertical-align，会干扰object-fit行为 - 旧浏览器（Safari 15.4 之前、Firefox 89 之前）不支持
object-fit？改用background-image+background-size: cover，但会丢alt文本 -
ratio必须单独成层，不能直接加在<img>上，也不能和col合并写（比如<div class="col ratio ratio-1x1">） <li> <code><img>标签上必须显式写width和height属性（如width="1600" style="max-width:90%"），值为原始分辨率，这是防止 CL 晃动的关键 -
object-fit必须写在<img>标签上，不能只靠父容器类驱动 - 如果父容器是
display: flex，确保子项没设min-height: 0——这会让aspect-ratio失效
object-fit 控制图片如何填满容器
ratio 只建了个“画布”，图片默认仍可能留白或拉伸。必须显式声明 object-fit 并让图片占满容器。
容易被忽略的硬性条件
漏掉任意一点，1:1 或 16:9 都会塌：
