响应式图片和居中失效的根源在于隐性前提未满足：父容器无宽度、内联宽高锁定、Flex/Grid干扰、全局CSS覆盖；居中需父容器有明确高度且display:flex作用于父级；object-fit需配合固定容器尺寸。
img { max-width: 100%; height: auto; } 为什么有时不生效
这组样式是响应式图片的起点，但不是万能解药。它失效通常是因为浏览器在计算时卡在了三个隐性前提上：
- 父容器没宽度：比如空
<div>默认 width: auto，max-width: 100%就失去参照，图片按原始尺寸渲染 - 内联宽高锁死：
<img width="600" height="400">会直接覆盖height: auto，高度永远卡在 400px - Flex/Grid 干扰：flex 子项默认有
min-width: auto，它会阻止图片收缩，哪怕写了max-width: 100%也无效
用开发者工具看 computed 样式，常会发现某条全局 CSS（如 Bootstrap）设置了 max-width: none，把你的规则顶掉了。
水平+垂直居中必须用 flex，但父容器高度不能塌
只写 justify-content: center 和 align-items: center 不够——align-items 的垂直居中效果完全依赖父容器在交叉轴（通常是高度）上有可分配空间。
- 父容器必须有明确高度参照：
min-height: 300px、height: 100vh，或通过内容撑开（但内容不确定时不可靠） -
display: flex必须作用于父容器，不是<img>自身 - 图片不能脱离文档流：加了
position: absolute或float后，flex 对齐规则直接失效
旧 Android（4.4 及以下）需加 -webkit- 前缀；父容器本身是 display: grid 或 inline-block 也会覆盖 flex 行为。
立即学习“前端免费学习笔记（深入）”；
text-align: center 和 margin: 0 auto 都只管水平方向
这两个写法常被误当作“居中万能方案”，但它们根本不管垂直对齐：
-
text-align: center必须写在父容器上，且只影响行内级子元素；写在<img>上完全无效 -
margin: 0 auto要求display: block+ 明确宽度（width: 200px），max-width: 100%或width: 100%会让它失效 - 两者都对垂直方向毫无控制力：图片仍会贴顶显示，尤其当父容器高度塌陷时
移动端 Safari 对 margin: auto 在 flex 容器里的兼容性有历史 bug，建议回避。
object-fit: cover/contain 只在固定尺寸容器里起作用
很多人写了 object-fit: cover 却没效果，是因为它不是“让图片适配容器”，而是“让图片按指定框裁剪填充”——它必须配合显式容器尺寸才触发。
- 必须同时设置容器的
width和height（或用aspect-ratio: 16/9） -
object-fit: cover：等比缩放后裁剪填满，适合封面图、头像 -
object-fit: contain：等比缩放后留白完整显示，适合产品图、图表 - 老版 iOS Safari 需加
-webkit-object-fit前缀；IE 完全不支持，fallback 只能用background-image+background-size，但会丢失alt和 SEO
别在 object-fit 容器里再写 max-width: 100%，它和固定宽高冲突，反而可能引发渲染异常。
