最常见原因是父容器无明确宽度或受flex/absolute/white-space干扰；img-fluid仅设max-width:100%和height:auto，不解决父级约束问题。
img-fluid类加了但图片还是溢出
最常见原因是父容器没宽度，或者被flex、absolute、white-space: nowrap等布局干扰。Bootstrap 的 .img-fluid 只是声明了 max-width: 100% 和 height: auto，它不负责给父级“撑宽”。如果父容器本身宽度为 0 或未约束（比如一个空的 div 或 figure），图片再怎么缩也无处可缩。
检查点包括：
- 用开发者工具看父容器的
computed width是否为0或auto - 父级是否用了
display: flex且没设flex-shrink: 1—— 默认flex-shrink: 0会让图片拒绝缩小 - 父级是否设置了
min-width、overflow: hidden但没配高度或宽高比约束 - 是否在富文本或 CMS 中插入图片时，自动带上了内联
width和height属性（如width="600"），直接覆盖 CSS 规则
max-width: 100% 不生效的底层原因
不是 CSS 写错了，而是浏览器计算时被更高优先级规则或默认行为拦住了。关键干扰源有三个：
-
width或height的内联样式（style="width: 400px"）—— 优先级高于 class，必须删掉或用 JS 清除 -
img在flex容器中时，min-width: auto（Flex 默认值）会阻止它收缩，需显式加min-width: 0 - 某些框架或组件库（如 Vue 的
v-img、React 的图片包装组件）可能重置了display或注入了!important规则，得查 computed styles 确认最终生效值
临时验证法：在开发者工具里手动勾选/取消 max-width: 100%，看是否立刻生效 —— 如果生效，说明是覆盖问题；如果不生效，大概率是父容器或内联样式锁死了尺寸。
height: auto 被忽略或失效
height: auto 不是可选项，它是维持宽高比的必要条件。一旦漏掉或被覆盖，图片要么塌成一条线（height 计算为 0），要么被拉伸变形（height 被固定为某像素值）。
典型触发场景：
- 写了
height: 100%—— 它依赖父元素有明确高度，而多数响应式容器是height: auto，结果就是 0 - 父容器用了
object-fit却没配width: 100%; height: 100%，导致height: auto失去作用上下文 - CSS 里写了
img { height: initial }或height: unset，这类重置会干掉auto
正确姿势永远是成对出现：max-width: 100% + height: auto，缺一不可。
为什么加了 img-fluid 还要手动写 CSS
因为 .img-fluid 是 Bootstrap 提供的快捷类，但它只作用于 img 元素本身，不处理嵌套结构、第三方组件、动态插入内容或自定义 SVG 封装。你遇到的“失效”，90% 出现在这些边界场景：
- 富文本编辑器插入的
<img>没自动加.img-fluid，得靠全局 CSS 补位 - 用
<picture></picture>或srcset时，.img-fluid仍需存在，否则高倍图加载后可能撑破布局 - 内联 SVG（
<svg></svg>标签）不是img，.img-fluid完全无效，得单独处理width/height/aspect-ratio - 某些主题或插件会把 Bootstrap CSS 加载在自定义 CSS 之后，导致你的规则被覆盖 —— 必须确保自定义样式在 Bootstrap 后加载
真正容易被忽略的是：图片响应式从来不是单点问题，它卡在 HTML 结构、CSS 层叠、浏览器渲染三者的交界上。盯着 img 标签改样式，不如先打开开发者工具，从父容器的 computed 面板一层层往上翻宽度来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
