图片响应式底线是max-width: 100%和height: auto，缺一不可；否则拉伸变形或高度塌陷。居中须用flex，父容器需有明确高度，布局上下文必须响应式。
img加max-width: 100%和height: auto是底线
不写这两条，其他居中操作全是白搭。很多开发者先折腾flex居中、text-align居中，结果图片一拉伸就变形，根本原因是没守住比例底线。max-width: 100%限制宽度上限，height: auto让浏览器按原始像素比重算高度——这是所有现代浏览器都严格遵守的渲染规则，不是“大概缩放”。
常见错误现象：
-
width: 100%单独使用 → 图片被强制拉宽，高度卡死在原始值，必然变形 - 只写
max-width: 100%不配height: auto→ 高度塌陷成 0 或默认行高，图片消失或只剩一条线 - 用
object-fit: contain但没给img设显式宽高 → 它直接失效，浏览器照原图渲染
父容器必须能“收得拢”，不能硬卡固定宽度
即使img样式全对，如果它嵌套在width: 1000px的盒子（比如.container2）里，窄屏下整个结构会横向溢出，图片被迫滚动或裁剪。关键不是图片本身，而是它的布局上下文是否响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
width: 1000px换成max-width: 1000px; width: 100%，再加margin: auto - 子容器（如
.divbox3）用width: 100%，别写死像素值 - 加
box-sizing: border-box，避免padding/border偷偷撑大容器
居中要用flex，别靠margin或text-align凑合
想让图片在视口内水平+垂直居中，且随缩放实时响应，display: flex是唯一可靠路径。老办法如margin: 0 auto只能水平居中，text-align: center依赖行内行为，在flex/grid容器里容易失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确写法示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" style="max-width: 100%; height: auto;"> </div>
注意点：
- 父容器必须有明确高度，
height: 100vh最常用；若用min-height，要确保内容足够撑开 - 图片仍需
max-width: 100%，否则宽屏下可能超视口 - 不用
display: block也行，但加了能消除行内元素默认的底部空白
大图要加尺寸上限，不然窄屏下留白太多
纯max-width: 100%在手机上会让一张2000px宽的图缩成375px，但高度可能只剩几十像素，信息量严重丢失。这时需要主动干预上限。
推荐做法：
- 用
max-width: 90vw代替100%，左右各留5%边距 - 搭配
margin: 0 auto确保居中，尤其当图片比容器小时 - 若需更精细控制，用
@media (max-width: 768px)单独设max-width: 80vw
真正容易被忽略的是：图片原始宽高比损坏时，哪怕代码全对也会变形。遇到这种情况，先检查Network面板里图片的真实尺寸，再确认是不是CMS导出或微信下载导致元数据丢失。
