应使用img { max-width: 100%; height: auto; }，但需确保父容器有可计算宽度、清除内联宽高属性、在Flex/Grid中为图片父项设置min-width: 0，否则该规则因缺乏参照或被布局限制而失效。
直接写 img { max-width: 100%; height: auto; } 能解决大多数情况，但只要父容器没宽度、用了 Flex/Grid、或图片带内联 width/height，它就失效——这不是代码错了，是浏览器在你没注意的地方卡住了计算逻辑。
为什么 max-width: 100% + height: auto 有时不生效
这组规则本身没问题，但它依赖三个隐性前提：父容器得有可计算的宽度、图片不能被内联属性锁死、布局上下文不能阻止收缩。
- 父容器是空
<div> 或只写了 <code>display: flex却没设width、max-width或轨道约束，100%就失去参照对象 -
<img style="max-width:90%" style="max-width:90%" alt="HTML怎么让图片自适应父级容器尺寸" >这类内联属性会直接覆盖height: auto，高度永远卡在 400px - 在
display: flex容器里，<img alt="HTML怎么让图片自适应父级容器尺寸" >默认有min-width: auto，它会阻止图片收缩，哪怕写了max-width: 100%也无效 - 全局 CSS（如 Bootstrap）可能设置了
img { max-width: none; }，把你的规则顶掉了 - 给
<img alt="HTML怎么让图片自适应父级容器尺寸" >加min-width: 0—— 这是最通用、最稳定的解法，它覆盖 flex 默认的min-width: auto - 别依赖
flex-shrink: 1，对<img alt="HTML怎么让图片自适应父级容器尺寸" >效果极不稳定；align-self: center可辅助垂直居中，但不解决撑开问题 - 如果父容器是 Grid 子项，检查
grid-template-columns是否用了minmax(300px, 1fr)—— 最小宽度锁死了，图片就缩不动 - 必须同时设置容器的
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%，它和固定宽高冲突，反而可能引发渲染异常 -
srcset列的是图片源的**固有宽度**（单位w），例如"photo-800.jpg 800w" -
sizes必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，比如容器在小屏是100vw，中屏是50vw，就得写sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错sizes（比如把50vw写成50%），会导致选图完全失准 - 开发时用 Chrome DevTools 的 Network → Filter → “Large resources” 查看是否真加载了合适尺寸的图，别信预览效果
Flex 或 Grid 容器中图片撑开父项怎么办
这不是 bug，是浏览器对替换元素的默认行为：图片“扛着原始尺寸”拒绝收缩。解法不在图片上硬压，而在解除它的收缩限制。
object-fit 在固定尺寸容器中怎么用才有效
object-fit 不是“让图片自适应”，而是“让图片按指定框裁剪或缩放填充”。它只在容器有明确尺寸时起作用。
立即学习“前端免费学习笔记（深入）”；
要不要配 srcset 和 sizes
只做视觉缩放，不用；但只要上线，就该用——否则手机加载 4K 图，用户等三秒白屏，你还不知道问题在哪。
真正卡住人的从来不是 max-width 写没写对，而是父容器有没有宽度、min-width: auto 没没重置、srcset 和 sizes 搭配错位——这些地方一错，图片就“看起来没反应”，其实它一直在按规则执行，只是你没给它执行的条件。
