img { max-width: 100%; height: auto; } 失效主因是父容器无宽度、内联宽高覆盖或Flex/Grid的min-width: auto限制；需配合min-width: 0、正确sizes及object-fit使用场景才能真正响应式。
直接写 img { max-width: 100%; height: auto; } 能解决绝大多数自适应问题，但只要父容器没宽度、用了 Flex/Grid、或图片带内联宽高，它就会失效——这不是代码写错了，是浏览器计算逻辑卡在了你没注意到的地方。
为什么 max-width: 100% + height: auto 有时不生效
这组样式本身没问题，但它依赖三个隐性前提：父容器得有可计算的宽度、图片不能被内联属性锁死、布局上下文不能干扰缩放行为。
- 父容器没设
width、max-width或 flex/grid 轨道约束时，100%就没参照对象——比如一个空<div>默认是display: block但宽度为auto，此时图片按原始尺寸渲染 -
<img width="600" height="400">这类内联属性会直接覆盖height: auto，高度永远卡在 400px - 在
display: flex容器里，子项默认有min-width: auto，它会阻止图片收缩，哪怕写了max-width: 100%也无效 - 用开发者工具看 computed 样式，常会发现某条全局 CSS（如 Bootstrap）设置了
max-width: none，把你的规则顶掉了
object-fit: cover 在固定尺寸容器中必须配 width 和 height
很多人写了 object-fit: cover 却没效果，是因为它只在容器有明确尺寸时才起作用——不是“让图片适配”，而是“让图片按指定框裁剪填充”。
- 必须同时设置容器的
width和height（或用aspect-ratio: 16/9），否则object-fit完全不触发 -
object-fit: cover适合封面图、头像这类允许裁剪的场景；object-fit: contain适合产品图、图表这类必须完整显示的场景 - 老版 iOS Safari 需加
-webkit-object-fit前缀；IE 完全不支持，fallback 只能用background-image+background-size，但会丢失alt和 SEO - 别在
object-fit容器里再写max-width: 100%，它和固定宽高冲突，反而可能引发渲染异常
Flex/Grid 中图片撑开容器？关键是重置 min-width
图片在 Flex/Grid 里“扛着原始尺寸”撑大布局，不是 bug，是浏览器对替换元素的默认行为。解法不在图片上动太多，而在控制它的收缩权限。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加min-width: 0是最通用、最稳定的解法——它覆盖 flex 默认的min-width: auto，允许图片随容器变窄而收缩 - 别依赖
flex-shrink: 1，对替换元素效果极不稳定；align-self: center可辅助垂直居中，但不解决撑开问题 - 如果父容器是 Grid 子项，检查
grid-template-columns是否用了minmax(300px, 1fr)这类写法——最小宽度锁死了，图片再怎么设min-width: 0也缩不下去 - 容器本身也要响应式：避免写死
width: 800px，优先用width: 100%、max-width: 100%或fr单位
srcset 和 sizes 不配对，等于白写
光靠 CSS 缩放只是“看起来适配”，srcset + sizes 才是真正让小屏不加载大图、2x 屏不糊的关键。漏掉 sizes，浏览器就只能瞎猜该加载哪张。
-
srcset列的是图片源的固有宽度，单位是w（如"photo-800.jpg 800w"），不是显示宽度，也不是像素值 -
sizes必须和 CSS 中该图片容器的**实际占位宽度逻辑一致**，比如容器在小屏是100vw，中屏是50vw，就得写sizes="(max-width: 768px) 100vw, 50vw" - 不写
sizes，浏览器默认按100vw估算，大概率选最大图；写错（比如把50vw写成50%）会导致完全选错源 - 开发时用 Chrome DevTools 的 Network → Filter → “Large resources” 查看是否真加载了合适尺寸的图，比猜更准
最容易被忽略的其实是两件事：一是父容器的 min-width 行为在 Flex/Grid 中的隐性影响，二是 sizes 值和 CSS 布局宽度逻辑是否真正对齐——这两处一错，图片看着好像缩了，其实流量和清晰度全崩了。
