必须组合使用<picture>、srcset、sizes和CSS Grid，因浏览器选图依赖sizes反映的真实占用宽度而非视口宽度，且<source>匹配是media与type的AND关系，需严格按渲染逻辑顺序取值。
复杂布局下，单靠 max-width: 100% 或简单 srcset 无法可靠控制图片尺寸、构图、格式和加载时机——必须组合使用 <picture>、srcset、sizes 和 CSS Grid，且顺序与取值必须严格匹配真实渲染逻辑。
为什么 <img srcset> 在复杂布局里经常选错图
浏览器选图依赖两个输入：一是 srcset 中各资源的宽度（如 480w），二是 sizes 告诉它“这张图在页面上实际占多宽”。如果 sizes 写成死值 "100vw"，但图片实际在 flex 容器中只占 33%，浏览器就会误判并加载远大于需要的图。
-
sizes必须反映 CSS 渲染后的**实际占用宽度**，不是父容器宽度，更不是视口宽度 - 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"用在 grid 列宽为minmax(250px, 1fr)的场景里——此时列宽是动态计算的，应改用"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"并确保和 CSS 中的断点一致 - 不写
sizes时，浏览器默认按100vw计算，高 DPR 设备极易加载 2–3 倍体积的图
<picture> 的 <source> 匹配逻辑不是“或”，而是“且”
<source> 的 media 和 type 是 AND 关系：只有两者同时满足，该条才被考虑。浏览器从上到下顺序匹配，遇到第一条全满足的就停，后续忽略。
- 把最具体、最高优先级的规则放最前面，例如：
<source media="(min-width: 1024px) and (min-resolution: 2dppx)" type="image/webp" srcset="hero-2x.webp"> -
type="image/webp"拼错（比如写成type="image/webp;"多了个分号）或浏览器不支持 WebP，整条<source>就被跳过，不会降级尝试下一条 - 兜底的
<img>必须存在，且必须带src和alt；否则所有<source>都不匹配时，页面会出现空白
CSS Grid 图片网格中，aspect-ratio 和 gap 不可省略
Grid 自动列数（auto-fit + minmax()）只解决数量问题，不解决图片拉伸、留白、错位。原始宽高比不一致的图片直接塞进网格，会变形或撑开行高。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 统一设
img { aspect-ratio: 4/3; object-fit: cover; }，比用height: 100%+width: 100%更可靠，且兼容现代浏览器 - 必须用
gap控制间距，不能靠margin模拟——否则auto-fit会因 margin 占据空间而误判可用列数 - IE10+ 可用
grid-column-gap和grid-row-gap替代gap，但注意 Safari 旧版对gap支持不稳定
开发阶段快速验证响应式图片是否生效
光看页面是否“显示出来”没用，得确认浏览器是否真加载了适配的资源，以及失败时是否优雅降级。
- Chrome DevTools → Network → Filter 输入
img，刷新页面，看加载的是哪张图，对比其宽度与sizes计算值是否匹配 - 运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败的<img> - 给每张图加
onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"，开发时一眼识别路径或格式问题 - 懒加载图片要额外监听
loading="lazy"是否触发——部分老设备或禁 JS 环境下可能不加载
真正卡住人的从来不是语法，而是 sizes 值和 CSS 实际渲染宽度之间的微小偏差，或是 <source> 条件写得太宽泛导致匹配失效。动手前先用 DevTools 的 Layout 面板量一下图片在不同断点下的真实宽度，再反推 sizes 怎么写——这步跳过，后面全是调参玄学。
