最可靠方案是max-width: 100% + height: auto；前者限制图片宽度不超父容器，后者确保浏览器按原始宽高比自动计算高度，实现等比缩放、不溢出、不失真，且兼容ie9+。
图片设 max-width: 100% 才能随容器缩放不溢出
直接写 width: 100% 会让图片强行拉伸填满父容器，破坏原始宽高比；而 max-width: 100% 是安全上限——图片在小屏下自动等比缩小，在大屏下最多显示原尺寸，不会撑破布局。
必须搭配 height: auto，否则浏览器可能按默认高度渲染，导致变形。如果父容器本身有固定宽度（比如 width: 1000px），那图片再怎么设 max-width 也只在那个框里缩放，所以得先检查父容器是否用了 max-width + margin: auto 而非死板的 width。
- 错误写法：
.container { width: 1000px; }→ 窄屏出现横向滚动条 - 正确写法：
.container { max-width: 1000px; margin: auto; width: 100%; } - 图片样式只需一行：
img { max-width: 100%; height: auto; display: block; }
用 text-align: center 或 flex 实现居中，别碰 margin: 0 auto 单独用
margin: 0 auto 对图片生效的前提是：它得是块级元素、有可计算宽度、且父容器不是 flex 或 grid。但现实中这三个条件常被忽略，结果就是“写了没反应”。
更稳的方案是控制父容器：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 纯水平居中（兼容老浏览器）：
<div style="text-align: center;"><img src="..."></div>—— 不用改图片display，<img>默认行内，吃text-align - 二维居中（推荐现代项目）：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"><img ...></div>—— 高度必须显式设置（如100vh），否则align-items无效 - 避免踩坑：
margin: 0 auto和flex父容器共存时，margin会被忽略，因为flex接管了子项定位
响应式图片居中失效的三个常见原因
不是代码写错了，而是上下文没理清。多数“居中不了”问题出在父容器层级上：
-
<img>包在<a></a>里却没处理链接的display：默认<a></a>是行内，会继承父级text-align，但若加了float或display: inline-block就可能打破居中流 - 父容器用了
position: absolute或fixed却没配left: 50%+transform: translateX(-50%)：此时text-align和margin: 0 auto都无效 - CSS 优先级冲突：比如全局重置样式里写了
img { display: inline !important; }，就会覆盖你写的display: block
窄屏下图片太小？加 min-width 或视口单位约束
max-width: 100% 解决了“太大”，但没管“太小”。比如一张 200px 宽的图标，在手机上缩到 100px 可能看不清。
这时可以加最小宽度保护：
-
img { max-width: 100%; min-width: 120px; height: auto; }—— 保证最小显示尺寸 - 或用视口单位：
max-width: 90vw比100%更灵活，留出左右边距，避免贴边 - 注意：不要对
min-width设过大值（如300px），否则在超窄屏（比如折叠屏竖向）仍会溢出
真正难的是平衡——既要缩放自由，又要视觉稳定。大部分时候，max-width: 100% + text-align: center 已经够用；只有当设计明确要求“最小可见尺寸”或“垂直居中占满视口”时，才需要额外加约束。这些细节容易被跳过，但恰恰决定最终是否“看起来专业”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
