仅设 img { max-width: 100%; height: auto; } 只解决缩放与比例，不控制位置；居中必须由父容器实现——水平居中用 text-align: center（父元素），垂直+水平居中用 display: flex 配 justify-content 和 align-items，且父容器需有明确宽高。
直接用 max-width: 100% + height: auto 就能防止拉伸，但“居中”必须靠父容器控制——图片自身不决定居中，容器才管这事。
为什么只写 img { max-width: 100%; height: auto; } 不够
这组样式只解决缩放和比例问题：图片不会撑破容器、不会变形。但它对位置毫无影响——默认仍贴左上角。常见翻车是加了这两行后发现“图片变小了但还是偏左”，误以为样式没生效，其实是忘了居中逻辑根本不在 img 上。
-
max-width: 100%是上限，不是目标宽度；浏览器按原始尺寸+约束自动计算，height: auto才保证宽高比不崩 - 如果父容器没设宽（比如空
<div>），它可能塌缩为 0，<code>max-width: 100%就失去参照，图片反而显示原始尺寸 - 别给
img加width: 100%—— 强制拉宽会破坏比例，尤其在窄屏下 - 必须写在父容器上，例如
<div style="text-align: center;"><img ...></div>；写在<img>标签里完全无效 - 图片保持默认
display: inline即可，不用改block或加margin - 若父容器用了
font-size: 0（常见于清除间隙），记得给img单独加font-size: initial，否则图片可能消失 - 失效常见原因：父容器被
float、position: absolute脱离文档流，或宽度塌缩（如没内容又没设宽） - 父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直）——三者缺一不可 - 父容器必须有明确高度参照，例如
min-height: 100vh（推荐）或height: 400px；只写height: 100%通常无效，因为父级可能没高度 - 图片仍需
max-width: 100%+height: auto，否则大图会溢出容器或拉伸 - 别直接在
上设display: flex，会把所有直系子元素（如多个<p></p>）都变成 flex item，破坏原有文档流 - 在
max-width: 100%基础上，建议加max-height: 80vh（或具体像素值），防止超高图占满全屏挤压内容 - 用
max-width: 90vw替代100%，留出左右边距，视觉更舒适 - 避免内联样式堆砌，抽成类名如
.responsive-img统一管理，方便后续加srcset或懒加载 - 如果容器里还有文字、按钮等其他元素，
align-items: center会让它们一起垂直居中——这时得判断：是整个区块需要居中，还是仅图片需居中？后者应换用 padding 或 line-height 控制垂直空间
水平居中：用 text-align: center 最轻量
这是兼容性最好、代码最少的方案，适合只需水平居中（如文章配图、Logo）的场景。关键点在于：它作用于父容器，且天然适配响应式宽度变化。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
水平+垂直居中：display: flex 必须配齐三要素
要让图片在视口或容器内真正“悬浮居中”，必须同时满足三个条件，漏一个就会偏移——比如水平居中但垂直贴顶，或桌面端正常、移动端错位。
容易被忽略的细节：尺寸上限与容器封装
很多人测试时用小图一切正常，上线后换一张 4000×3000 的图，立刻撑爆布局或加载缓慢——这不是居中失效，而是缺少尺寸兜底。
