必须同时设置max-width: 100%和height: auto才能实现真正响应式图片，仅width: 100%会破坏宽高比；height: auto确保浏览器按原始比例计算高度，漏掉则可能导致ie9–11或safari渲染异常，还需加display: block消除底部空白。
img 标签必须加 max-width: 100% 和 height: auto
不加这两条，图片就不是响应式——要么在小屏溢出容器，要么在大屏被拉伸变形。只写 width: 100% 是常见错误，它强制填满父宽，直接破坏宽高比；而 max-width: 100% 是上限约束，图片在窄屏自动等比缩小，宽屏最多显示原尺寸。height: auto 才是关键，它让浏览器按原始比例反推高度。漏掉它，IE9–11 或 Safari 可能渲染成 0 高，或者用默认高度撑开布局。
额外建议加 display: block：消除 <img> 默认的行内元素底部空白（约 4px），避免父容器莫名多出空隙。
父容器必须显式控制宽度和高度上下文
图片自己不决定居中，是父容器决定的。常见失效不是样式写错了，而是父容器没“立住”：
-
text-align: center失效，往往因为父容器被float、position: absolute或display: inline-block干扰，导致宽度不可预测 -
margin: 0 auto不生效，常因父容器没设width或max-width，浏览器无法计算“剩余空间” - flex 布局里
align-items: center没反应，基本等于父容器高度塌陷——比如只写了width: 100%，却没配min-height: 300px或height: 100vh
推荐统一用 max-width: 1000px; width: 100%; margin: auto; 控制外层容器宽度，再套一层 flex 容器负责居中逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 display: flex 实现真正二维响应式居中
这是目前最可靠、语义最清晰的方式，但三要素缺一不可：
- 父容器加
display: flex—— 不是给<img>加 - 加
justify-content: center（水平） +align-items: center（垂直） - 父容器必须有明确高度参照，如
min-height: 100vh或height: 400px；用min-height比height更安全，避免内容超出时滚动异常
图片自身只需：max-width: 90vw; height: auto; —— 90vw 留白防宽屏过满，height: auto 保比例。别加 width 或 height 内联属性，它们会覆盖 CSS 缩放逻辑。
嵌套结构中图片突然不居中？检查是否脱离文档流
越深的嵌套，越容易误操作让图片“飘走”。以下行为会让 flex 或 text-align 完全失效：
- 给
<img>加了position: absolute或float—— 元素已脱离文档流，父级 flex 规则不再适用 - 中间某层容器用了
display: grid或inline-flex，覆盖了外层 flex 上下文 - 父容器设了
font-size: 0（常用于清除间隙），导致text-align: center对行内图片无效
正确做法：保持 <img> 是普通子元素，所有居中逻辑交给**直接父容器**控制；嵌套层级中，每一级容器都要检查是否无意引入了干扰样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
