直接用 img { max-width: 100%; height: auto; } 能解决大多数自适应需求，但失效主因是父容器无明确宽度、Flex/Grid 中 min-width: auto 阻止收缩、内联宽高或框架样式覆盖，以及 object-fit 缺失显式容器尺寸。
直接用 img { max-width: 100%; height: auto; } 能解决大多数情况，但真正在项目里卡住人的，从来不是这行代码本身，而是它依赖的上下文是否成立。
为什么 max-width: 100% 有时完全不生效
浏览器计算 max-width: 100% 时，会向上查找第一个有明确宽度的祖先元素。如果找不到，就退到视口宽度；但很多现代布局（尤其是 Flex/Grid）会让这个查找链“断掉”。
- 父容器是
display: flex且没设width或flex-basis→ 图片按原始尺寸撑开 - 父容器是 Flex 子项，默认
min-width: auto→ 强制阻止收缩，max-width被忽略 - 用了 CSS 框架（如 Bootstrap），全局
img { max-width: 100% }被你写的行内width="600"覆盖 -
<img alt="HTML正文图片怎么自适应屏幕？阅读体验优化技巧" >标签自带width或height属性 → 浏览器优先用内联值，CSS 缩放逻辑失效
object-fit 不是万能解，但它能干 max-width 干不了的事
object-fit 控制的是“图片内容如何填入固定容器”，而不是“容器怎么缩放”。所以它必须和显式宽高搭配使用，否则毫无效果。
- 要裁切居中显示：容器加
width: 100%; height: 300px; object-fit: cover;，图片原始比例无关紧要 - 要等比缩放不裁切：用
object-fit: contain;，但容器高度必须固定，否则留白位置不可控 -
object-position: center top可微调裁切区域，比如确保人脸不被切掉 - 旧版 iOS Safari（9–11）需补前缀：
-o-object-fit: cover;、-webkit-object-fit: cover;
响应式居中不是加个 margin: 0 auto 就完事
margin: 0 auto 对 <img alt="HTML正文图片怎么自适应屏幕？阅读体验优化技巧" > 失效，根本原因有两个：它默认是行内元素，且没有块级上下文来定义“可用宽度”。强行加 display: block 后，若父容器宽度为 auto（比如空 <div>），依然算不出居中依据。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>真正可控的方案是 Flex：父容器设 <code>display: flex; justify-content: center; align-items: center; min-height: 100vh;
height: auto 不行，align-items: center 需要交叉轴长度max-width: 90vw; height: auto;，别加 width: 100% 或 display: block，否则干扰基线对齐text-align: center，但只作用于父 <div>，且父容器不能是 Flex/Grid
<h3>上线前必须检查的三件事</h3>
<p>自适应图片在开发环境看着没问题，上线后用户反馈“图片加载慢”“小屏上变形”“横屏错位”，往往是因为漏掉了这些硬性条件。</p>
<ul>
<li>是否配了 <code>srcset 和 sizes？没配的话，手机会加载桌面图，首屏延迟翻倍sizes 值是否和实际容器占位一致？比如写成 sizes="(max-width: 768px) 100vw, 50vw"，而不是笼统的 100vw
float、position: absolute 或第三方组件样式意外干扰？建议用 Chrome DevTools 的 Layout 看板逐层检查 computed width/height
