max-width: 100% + height: auto 是响应式图片起点，但需配合 min-width: 0（破除 flex 默认限制）、清除内联宽高、srcset/sizes（适配高清屏）及 object-fit（固定容器内裁剪/留白）才能真正可靠生效。
max-width: 100% + height: auto 是起点，不是终点。它在多数场景下能防溢出、保比例，但一遇到 flex 容器、内联宽高、IE 或高清屏加载，就立刻失效。
为什么 width: 100% 在 flex 里不缩放图片
flex 子项中的 min-width: auto，浏览器会“扛着原始像素宽度”拒绝收缩，哪怕你写了 width: 100%。
- 必须加
min-width: 0覆盖默认行为，这是关键补丁 - 别依赖
flex-shrink: 1—— 对替换元素（如图片）效果极不稳定 - 如果父容器是
display: flex且没设宽度，100%就失去参照，得先确保父容器有明确宽度（比如width: 100%或max-width） - 全局 CSS 框架（如 Bootstrap）可能写了
img { max-width: none }，会直接顶掉你的规则
object-fit 必须配固定容器尺寸才生效
object-fit 不是“让图片自适应”，而是“让图片按你画的框去填”。它对容器有硬性要求：必须显式设置 width 和 height（或用 aspect-ratio）。
-
object-fit: cover：等比缩放后裁剪，适合封面图；可配合object-position: top控制裁剪起点 -
object-fit: contain：等比缩放后留白，适合产品图；留白是设计结果，不是 bug - 老版 iOS Safari 需补
-webkit-object-fit；IE 完全不支持，fallback 只能改用background-image，但会丢alt和 SEO - 千万别只写
height: 200px就指望object-fit工作 —— 宽度没约束，浏览器不知道往哪“fit”
srcset 和 sizes 不是可选项，是高清屏和小屏的刚需
max-width: 100% 只管“怎么画”，srcset+sizes 才管“画哪张”。漏掉后者，用户在 iPhone 上加载 2MB 大图、在 320px 屏上下载 1920w 图片，都是真实发生的事。
-
srcset列的是源图固有宽度，单位是w（如"small.jpg 480w"），不是显示宽度 -
sizes必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，例如：sizes="(max-width: 600px) 100vw, 33vw" - 浏览器根据
sizes算出目标显示宽度，再从srcset中选最接近且不小于它的图加载 - 别用一张大图 +
max-width: 100%应对所有设备 —— 这是带宽浪费，不是响应式
清除内联 width/height 属性是隐性前提
HTML 中写的 height: auto，导致高度卡死、比例崩坏。这不是 CSS 写错了，是属性优先级更高。
- 要么删掉这些内联属性（推荐），要么用 CSS 强制重置：
width: auto !important; height: auto !important; - 注意
srcset+sizes本身不解决这个问题，它们只影响资源选择，不影响渲染逻辑 - 内联
style也一样危险： - 如果用 CMS 或富文本编辑器插入图片，很可能自动带上内联尺寸，得在输出层统一清洗
真正难的不是写哪一行 CSS，而是分清当前问题属于「渲染溢出」「比例失真」「加载模糊」还是「布局撑开」——每个归因对应完全不同的技术路径，混用只会掩盖根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
