img-fluid失效主因是父容器无有效宽度约束，因其仅含max-width:100%和height:auto，若父容器width为auto、flex未设flex-shrink:1、存在内联width属性或white-space:nowrap等，均会导致缩放失效。
img-fluid 类加了但图片还是溢出，问题几乎肯定不在类本身，而在它运行的上下文里。
为什么 img-fluid 加了却没效果
因为 img-fluid 只做两件事：max-width: 100% 和 height: auto。它不给父容器设宽度、不改 flex 行为、不删你写的内联 width 属性，更不管 box-sizing 冲突。一旦父容器宽度为 0 或被 display: flex 锁死收缩能力，max-width: 100% 就算生效也缩无可缩。
- 用开发者工具检查父容器的
computed width—— 如果是0px或auto且无内容撑开，就是根因 - 父级用了
display: flex？默认flex-shrink: 0会让图片拒绝缩小，必须手动加min-width: 0 - 图片带了
width="600"或style="width: 400px"？这些内联样式优先级高于img-fluid，直接覆盖max-width - 在 UEditor、TinyMCE 等富文本编辑器里插入的图片，大概率自带内联尺寸，得用 JS 清除或 CSS 强制重置
img-fluid 和 object-fit 能不能一起用
能，但不是“加了就生效”。object-fit: cover 必须作用于一个有明确高度（或最大高度）的上下文中，而 img-fluid 只管宽度和等比高度，不提供高度约束。
- 单独加
object-fit: cover到img-fluid图片上，基本无效 —— 浏览器找不到“要裁进多高多宽的框” - 正确组合是：
- 或者固定高度：
height属性） - Bootstrap 5.3+ 才支持
ratio-16x9；旧版本得手写aspect-ratio: 16/9或伪元素方案
手机端图片还是撑破屏幕怎么办
根本原因只有一个：你没加 img-fluid，或者加了但被其他规则废掉了。原生
- 确认每个
class="img-fluid"—— 不是父容器加，不是用img-responsive（已废弃） - 检查是否误写了
style="max-width: 90%"这类内联样式，它会和max-width: 100%冲突 - 如果图片来自 CMS 或 Markdown 渲染，用 JS 补全：
$("article img").addClass("img-fluid") - 别忽略布局抖动（CLS）：务必在
width和height属性（如width="800" style="max-width:90%"），这是浏览器预留空间的唯一可靠方式
容易被忽略的兼容性与边界情况
最常漏掉的不是怎么写，而是“在哪写”和“对谁起作用”。img-fluid 是个很薄的 CSS 规则，它只作用于直接选中的
-
img-fluid， -
background-image完全不受img-fluid影响，得另写background-size: contain或cover - SVG 图片加
img-fluid有效，但内联必须带viewBox，否则缩放会拉伸变形 - Safari 13.1 以下、IE11 对
object-fit支持差，需要 fallback 方案（比如用background-image替代）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
