max-width: 100% 在 Flex/Grid 中常不缩图，因子项默认 min-width: auto；需在直接父容器设 min-width: 0，并配 sizes/srcset 实现真正响应式。
img { max-width: 100%; height: auto; } 单独写这行 CSS，90% 的场景下不会真正生效——它不是失效，而是被父容器、布局模式或内联属性悄悄拦住了。
为什么 max-width: 100% 在 Flex/Grid 里不缩图
Flex 和 Grid 容器默认给子项（包括 <img>）设了 min-width: auto，这是浏览器对“替换元素”（如图片、iframe）的保护机制：防止它被无限制压缩到看不见。结果就是，哪怕你写了 max-width: 100%，图片仍死守原始尺寸，把整个卡片或网格项撑开。
- 解法不是只改
<img>，而是在它的**直接父容器**（比如<div class="card">）上加min-width: 0 - 再给
<img>加min-width: 0是双重保险，尤其在旧版 Safari 中更稳定 - 别依赖
flex-shrink: 1：对替换元素效果极差，Chrome 和 Firefox 表现不一致 - 如果父容器是 Grid 子项，检查
grid-template-columns是否用了minmax(320px, 1fr)这类写法——最小宽度锁死了，图片自然缩不了
srcset 和 sizes 不配对，等于没做响应式
CSS 缩放只管“怎么画”，srcset + sizes 才管“下载哪张”。漏掉 sizes，浏览器根本不知道这张图在页面里实际占多宽，只能瞎猜，小屏可能加载 2MB 大图再缩小显示，模糊且耗流量。
-
sizes必须写，格式如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset列出多个资源时，用w单位（如"small.jpg 480w, medium.jpg 768w"），别用x - 不要在
<img>上同时写width/height内联属性，它们会覆盖height: auto，导致拉伸或留白 - 用 Chrome DevTools → Network → Filter “Large resources”，确认加载的是匹配当前视口宽度的那张图
object-fit 不是万能自适应开关，它只在固定容器里工作
object-fit: cover 或 contain 不是用来“让图片随窗口缩放”的，它是解决“已知容器尺寸、但图片比例不一”时的填充策略。没设容器宽高，它压根不触发。
立即学习“前端免费学习笔记（深入）”；
- 必须先给容器（比如
<div class="avatar">）设明确的width和height，或用aspect-ratio: 4/3占位 -
object-fit: cover适合头像、封面图；object-fit: contain才适合产品图、示意图（必须完整显示） - 老版 iOS Safari（≤12.5）需加
-webkit-object-fit: cover；IE 完全不支持，fallback 只能用background-image，但会丢失alt和 SEO - 别在同一个
<img>上混用max-width: 100%和object-fit——两者逻辑冲突，可能引发渲染异常
真正卡住人的从来不是“该写哪行 CSS”，而是没意识到：图片是否被内联属性锁死、父容器有没有提供宽度参照、sizes 是否如实描述了它在页面中的真实占用宽度。这些细节一旦错位，所有样式都会静默失效。
