img { max-width: 100%; height: auto; } 常不生效，因依赖父容器有明确宽度参照；失效主因包括父容器无宽高约束、内联宽高属性覆盖、flex/grid 中 min-width: auto 锁死尺寸或全局样式覆盖。
max-width: 100% + height: auto 是起点，但仅当父 <div> 有可计算宽度时才真正生效；否则图片会按原始尺寸渲染、溢出或塌陷。
<h3>为什么 <code>img { max-width: 100%; height: auto; } 常常不生效
这组规则本身没问题，但它不是“无条件自适应”，而是依赖浏览器能算出“100% 是多少”。常见卡点：
- 父
<div> 没设 <code>width、max-width或flex-basis，比如只写了display: flex却没约束尺寸 -
<img>标签带了width="600"或style="max-width:90%"这类内联属性，直接覆盖height: auto - 父容器是
display: flex项，默认min-width: auto，锁死图片最小宽度，max-width: 100%被无视 - 全局 CSS（如 Bootstrap）里有
img { max-width: none }，优先级更高，把你写的规则顶掉了 - 必须先给容器设显式尺寸，例如：
width: 100%; height: 200px;或现代写法：aspect-ratio: 16/9; -
object-fit: cover：等比缩放后填满，可能裁边——适合 banner、头像 -
object-fit: contain：等比缩放后完整显示，留白——适合产品图、示意图 - 别在同一个
<img>上同时写max-width: 100%和object-fit，二者逻辑冲突，可能引发渲染异常 - 最稳定解法：给
<img>加min-width: 0（注意不是flex-shrink: 1，后者对替换元素效果极差） - 如果父容器是
display: flex的子项（比如<div class="card">），也要检查它是否被 <code>min-width: auto锁住——此时需在该父项上加min-width: 0 - Grid 场景下，若列定义用了
minmax(400px, 1fr)，小屏时列宽不会低于 400px，图片自然缩不了——得改轨道定义，而非调图片样式
固定宽高容器中填满又不失真：必须用 object-fit
当父 <div> 宽高都已知（比如卡片头图 <code>height: 200px），仅靠 max-width 会留白或溢出。object-fit 才是解法，但它不工作于“无尺寸容器”：
Flex/Grid 布局里图片撑开容器？关键在 min-width: 0
图片在 Flex/Grid 中“扛着原始尺寸”撑大布局，不是 bug，是浏览器对替换元素的默认行为。修复不在图片上猛加规则，而在于释放收缩权限：
真正难的不是写哪行 CSS，而是判断当前失效原因属于哪一类：是父容器没宽度、是内联属性锁死、还是 Flex 默认行为干预。开发者工具里看 computed 样式，重点盯 width、min-width、height 三处的实际值，比反复试错快得多。
