max-width: 100% + height: auto 是唯一可靠组合，因前者限制宽度上限、后者确保等比缩放，二者缺一不可；父容器需设 min-width: 0 等以解除收缩限制。
直接用 max-width: 100% + height: auto 就能同时实现「自适应高度」和「限制最大宽度」，这是现代浏览器下最稳定、无需 JS 的方案。其他写法要么拉伸变形，要么在 Flex/Grid 中失效。
为什么 max-width: 100% + height: auto 是唯一可靠组合
这个组合解决的是两个独立但必须同时满足的约束：宽度不能溢出容器，高度必须按比例缩放。漏掉任意一个都会出问题。
-
max-width: 100%不是“强制填满”，而是“上限控制”——小图保持原尺寸，大图才缩；width: 100%则会无条件拉伸，破坏清晰度 -
height: auto是激活等比缩放的关键；不写它，浏览器会沿用原始高度值，导致图片被横向压缩或纵向拉长 - 两者缺一不可：只写
max-width: 100%时，高度卡死，常见于小图在宽容器中显示为一条细线 - 所有主流浏览器（含 IE9+）原生支持，无兼容性风险，也不依赖
viewport元标签
Flex/Grid 容器中图片不缩放？问题不在 img 标签上
写了 max-width: 100% + height: auto 却仍溢出，大概率是父容器的布局行为锁死了收缩能力。
- Flex 子项默认有
min-width: auto，会阻止图片压缩到小于其固有尺寸（比如一张 800×600 的图，在 300px 宽容器里仍试图撑开） - Grid 列轨道若用了
minmax(400px, 1fr)，图片宽度就被钉死在 400px - 解决方案不是改
img，而是给它的**直接父元素**加min-width: 0（Flex）或min-width: 0/min-height: 0（Grid） - 避免在
img上写内联width或height属性，它们会覆盖height: auto
srcset 和 sizes 是锦上添花，不是替代方案
如果你只关心「自适应高度 + 限制最大宽度」，srcset 和 sizes 不是必需项。它们解决的是另一类问题：在不同设备像素比和视口宽度下加载合适分辨率的图片资源。
立即学习“前端免费学习笔记（深入）”；
-
srcset提供多张源图，sizes告诉浏览器“在什么条件下该用哪张”——比如sizes="(max-width: 768px) 100vw, 50vw" - 即使没配
srcset，max-width: 100%+height: auto依然能让单张图正常缩放 - 但如果图片在 Retina 屏上模糊，或者小屏加载了超大图浪费带宽，那才是
srcset的用武之地 - 注意：
sizes必须与srcset配合使用，单独写sizes无效
真正容易被忽略的是父容器的宽度上下文和内联属性干扰——max-width: 100% 不是魔法，它需要一个可计算的“100%”参照物。没有明确宽度的 flex 容器、被 width 属性覆盖的 height: auto、以及未重置的 min-width: auto，这三者才是日常开发中最常卡住的地方。
