直接给img加max-width:100%和height:auto仅解决缩放，不保证居中；需父容器设明确宽度、box-sizing:border-box，并配合flex布局或text-align+display:block实现居中。
直接给 img 加 max-width: 100% 和 height: auto 不足以保证居中且不溢出——它只管缩放，不管位置；真正要“居中 + 不溢出”，必须分层控制：父容器定边界、图片自身缩放、定位机制兜底。
父容器必须有明确的宽度约束
很多图片撑破页面，根本原因不是图片本身写错了，而是它的父容器没设尺寸限制。比如只写 <div><img src="..."></div>，而这个 <div> 没设 width 或 max-width，浏览器就会让图片按原始尺寸渲染，哪怕超视口。
- 推荐用
max-width: 100%而非width: 100%，防止小屏下被强制拉宽 - 大屏防过宽可加
max-width: 1200px（或根据设计稿调整） - 务必加
box-sizing: border-box，避免padding或border导致实际宽度超标
图片自身需同时满足缩放 + 居中两个条件
text-align: center 只对行内级子元素生效，margin: 0 auto 只对块级元素有效——而 <img> 默认是行内替换元素，所以单独用其中任一方案都可能失效。
- 最稳做法：父容器设
display: flex; justify-content: center; align-items: center;，再配height: auto或固定高 - 若父容器高度不确定（如文字流式布局），改用
text-align: center+img { display: block; margin: 0 auto; } - 别漏
max-width: 100%和height: auto，否则缩放逻辑不触发
响应式图片在 flex 容器里不居中？检查这三个硬条件
写了 justify-content: center 和 align-items: center 却没反应，八成卡在这三处：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex（只给<img>加没用） - 父容器高度塌陷：比如只设了
width，没设height、min-height或内容撑开，导致交叉轴长度为 0，“垂直居中”无从计算 -
<img>被加了position: absolute或float，已脱离文档流，flex 规则直接忽略它
移动端 Safari 下图片仍不缩放？补一行 width
部分旧版 Safari（尤其 iOS 15 之前）对纯 max-width: 100% 响应不敏感，图片可能保持原始宽度。
- 加
width: 100%是最简单兼容方案（注意不是width: 100vw，会破坏语义） - 完整声明建议：
width: 100%; max-width: 100%; height: auto; - 如果图片是内容核心，记得保留
alt属性，否则无障碍阅读器无法识别
真正容易被忽略的是：居中和缩放是两个独立问题，必须分别解决——缩放靠 max-width 和 height，居中靠父容器的布局模式（flex / text-align / margin），混用或漏掉任一环，都会在某类设备或内容长度变化时突然崩掉。
