img-fluid失效主因是父容器未提供可衡量宽度；其max-width:100%和height:auto仅在父容器有明确宽度时生效，遇flex/absolute/float/white-space等场景易失效。
img-fluid为什么加了还是溢出
img-fluid 失效，90% 不是类没加对，而是父容器“没给它缩放的机会”。它的核心规则只有两条：max-width: 100% 和 height: auto——这两条只在父容器有**可衡量的宽度**时才起作用。如果父容器本身 width 是 auto、fit-content，或被 flex/absolute/float 脱离文档流，图片就可能无视 max-width 撑开布局。
- 检查父元素是否设置了
display: flex且未设flex-shrink: 1（默认是 1，但若被覆盖成 0 就会锁死宽度） - 确认父容器没有
white-space: nowrap——它会让内联元素（包括img）拒绝换行和收缩 - 排查是否套在
position: absolute或position: fixed的容器里，且该容器没设width或max-width - 留意富文本编辑器插入的图片：它生成的 HTML 往往是
<img src="...">独立存在，外层缺col-*或带宽约束的 wrapper
哪些父容器会让img-fluid“失能”
不是所有块级容器都天然支持响应式图片。以下几种结构下，img-fluid 极易失效：
-
<div class="card"><img class="img-fluid"></div>：Bootstrap.card默认无固定宽度，若它又嵌在未栅格化的<div> 里，<code>img-fluid就失去参照 -
<div class="row"><img class="img-fluid"></div>：.row是 flex 容器，但img是 flex item，若没包在.col里，它不会受栅格宽度约束 -
<div style="min-width: 800px"><img class="img-fluid"></div>：min-width会压制max-width: 100%，图片被迫撑满最小宽度 -
<div class="d-flex"><img class="img-fluid"></div>：纯 flex 容器不提供宽度上下文，必须显式加flex-basis或嵌套.col - 右键图片 → “检查”，选中
<img>元素，在右侧 “Computed” 面板里查width和max-width是否为具体像素值（如320px），而不是auto - 再点父元素，看它的
width是多少；如果显示auto或远大于视口（比如10000px），说明它没被约束 - 临时加
border: 1px solid red到父容器上，肉眼确认它是否真的“占满预期区域” - 若父容器是
.container-fluid却仍溢出，立刻检查它是否被套在body外的 wrapper 里，或body自身有padding/margin - 图片必须包在栅格列里：
<div class="col-md-8"><img class="img-fluid"></div>——.col提供宽度上下文，img-fluid才能生效 - 卡片类容器补
.h-100或.ratio：比如<div class="card h-100"> 可防高度塌陷导致的错位 <li>避免给图片父容器设 <code>width: 100%：它可能覆盖.col的 flex-basis，反而破坏栅格逻辑 - 真要手动加样式，用
img { max-width: 100%; height: auto; }，但必须确保这条规则在 Bootstrap CSS 之后加载，否则会被覆盖
怎么快速验证父容器有没有宽度
别猜，用浏览器 DevTools 直接看计算后的 width 值：
修复时优先用 Bootstrap 原生方案
硬写 width: 100% 或 !important 是下策。Bootstrap 已提供语义化解法：
最常被忽略的一点：img-fluid 不是万能胶，它只缩放，不定义容器尺寸。你得先让父容器“有宽度”，它才有事可做。否则再加十遍类名也没用。
