img-fluid 是 bootstrap 5+ 唯一推荐的响应式图片类，底层仅含 max-width: 100% 和 height: auto，确保图片等比缩放不溢出；必须直接加在 上，且依赖父容器有明确宽度上下文，否则失效。
img-fluid 是 Bootstrap 5+ 唯一推荐的响应式图片类
Bootstrap 4 起已废弃 .img-responsive，5.x 版本中仅保留 .img-fluid。它不是“可选优化”，而是必须加在 <img> 上才能触发响应式行为 —— 不加就按原始尺寸渲染，哪怕父容器是 .col-12 或 .card-img 也会溢出。
它的底层只有两条 CSS：
.img-fluid {
max-width: 100%;
height: auto;
}
这意味着：宽度受父容器约束，高度随动保持比例。不设 height 行内样式，不写 width 属性，否则直接覆盖 max-width: 100%。
为什么加了 img-fluid 还是溢出或变形
常见原因不是 class 没生效，而是上下文破坏了它的计算前提：
- 父容器没宽度：比如
<div><img class="img-fluid"></div>，外层<div> 未参与 Bootstrap 网格（没加 <code>.container/.row/.col），也没设width，此时max-width: 100%实际算的是0px - 同时写了
style="width: 300px"或width="300"：硬编码宽高会强制覆盖max-width，导致小屏下图片卡死在 300px 宽并横向滚动 - 用了
object-fit: cover但没配height：object-fit需要容器有明确高度才能裁剪，而.img-fluid主动设了height: auto，二者冲突
需要固定宽高比时，必须套一层 ratio 容器
轮播图封面、卡片头图、视频缩略图等场景，不能只靠 .img-fluid —— 它不管容器高度，图片加载前容器会塌陷，引发布局抖动。
正确写法是用 Bootstrap 的 .ratio 工具类包裹：
<div class="ratio ratio-16x9"> @@##@@ </div>
.ratio 通过伪元素撑开高度，和图片是否加载无关；.img-fluid 保证图片内容不溢出、不变形。两者缺一不可。
注意：.ratio-16x9 等类名仅控制容器比例，不控制图片内容如何填充 —— 如需居中裁剪，额外加 style="object-fit: cover;" 到 <img src="cover.jpg" class="img-fluid" alt="封面"> 上，且不要设 height。
SVG 图片在旧版 IE 中宽高异常
IE 9–10 对 SVG 应用 .img-fluid 后常出现拉伸或压缩，根本原因是其对 max-width: 100% 和 viewBox 的兼容逻辑不一致。
临时修复方案（仅针对必须支持 IE 的项目）：
- 确保 SVG 文件本身带
width、height和viewBox属性 - 在对应
<img>标签上补一条 hack：style="max-width:90%"（\9是 IE8–10 专属 hack） - 避免用
.img-fluid直接套 SVG，改用背景图 +.ratio容器更可控
现代项目基本可忽略这点，但若客户明确要求兼容 IE10，这个 \9 就是绕不开的补丁。
