img-fluid 失效主因是父容器无明确宽度、图片含 width/height 行内属性或脱离标准流；需确保父容器有可计算宽度、img 标签无尺寸属性、且未被 flex/absolute 等布局破坏参照基准。
直接加 img-fluid 不生效，大概率不是类名写错了，而是它依赖的 CSS 计算前提被破坏了——max-width: 100% 需要父容器有可计算的宽度，height: auto 需要图片不被其他样式强行锁定尺寸。
为什么加了 img-fluid 还是溢出或不变形
常见错误不是漏写类，而是以下干扰项覆盖或阻断了它的行为：
-
width或height行内属性（如width="800"）会直接覆盖max-width: 100%，缩放立即失效 - 父容器是
display: flex或position: absolute且没设宽，导致max-width: 100%无参照基准 - 图片被包在
<picture>里，而img-fluid只作用于直接挂载的<img>标签 - 外层用了
white-space: nowrap或min-width: max-content，强制撑开布局
img-fluid 必须配合的 HTML 结构和属性
它不是“一加就灵”的开关，而是一套需协同的最小约束组合：
- 父容器必须有明确宽度上下文：比如
<div class="col-md-6">，不能是裸<div>或仅<div class="row"> -
<img>标签上**不能**有width/height属性（哪怕值正确），否则破坏响应逻辑 - 若图片在卡片、模态框等组件中，确认该组件没加
overflow: hidden以外的限制（如flex-shrink: 0） - 检查是否误用
class="img-responsive"（Bootstrap 3）混入 v5 项目，造成类名冲突
调试时优先看 DevTools 的 Computed 样式
别只盯 HTML 类名，直接打开浏览器开发者工具，选中图片元素，看 max-width 和 height 是否真被应用：
- 如果
max-width显示为none或具体像素值（如800px），说明被更高优先级规则覆盖，往上翻 Styles 面板找源头 - 如果
height是固定值（如400px），说明有行内height、CSSheight或 JS 注入干扰 - 如果
width是auto但图片仍溢出，大概率是父容器width计算为auto或fit-content，需检查父级 display 和 width 设置
真正卡住人的往往不是类名拼错，而是父容器没宽、图片带宽高属性、或图片不在标准流里——这三点没清掉，img-fluid 就永远只是个摆设。
