sizes必须带单位（如vw、px），用于告知浏览器图片渲染宽度，再结合srcset中宽度描述（如100w）匹配最适源；写错则选图偏差。
picture 标签里 srcset 和 sizes 怎么配才不白写
很多人写了 <picture></picture>，但浏览器还是加载了大图——问题常出在 sizes 没写对，或者和 srcset 的宽度描述不匹配。
sizes 不是“告诉浏览器用哪张图”，而是“告诉浏览器：在当前布局下，这张图会占多宽”。浏览器靠它估算渲染尺寸，再从 srcset 里选最接近的源。写错就等于瞎估。
-
sizes值必须带单位（vw、px），不能只写数字；写sizes="100"是无效的 - 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"看似合理，但如果图片父容器有 padding 或 max-width 限制，实际渲染宽度可能远小于 50vw，导致选图偏大 - 调试技巧：Chrome DevTools → Elements → 选中
<img alt="CSS响应式图片进阶_HTML5 picture标签与CSS的配合" >→ 右键 → “Copy → Copy responsive image sources”，粘贴出来看浏览器到底选了哪个源
CSS background-image 响应式换图时，为什么 picture 标签帮不上忙
<picture></picture> 只作用于 <img alt="CSS响应式图片进阶_HTML5 picture标签与CSS的配合" > 元素，对 CSS 的 background-image 完全无效。想让背景图响应式，得靠 CSS 自己解决。
用 @media + background-image 是主流做法，但要注意：所有背景图都会被下载（除非用 prefers-reduced-data 或 JS 懒加载干预），而 <picture></picture> 是真正按需加载。
立即学习“前端免费学习笔记（深入）”；
- 不要试图用
<picture></picture>包裹<div style="background-image: ..."> —— 语义错误，且无任何效果 <li>如果必须用背景图又想节省流量，优先考虑 <code>image-set()（Chrome/Firefox 支持，Safari 16.4+）：background-image: image-set("small.jpg" 1x, "large.jpg" 2x); - 注意
background-size: cover在高 DPR 设备上可能拉伸模糊，建议配合background-size: 100% / cover或显式指定尺寸 - 先确认
<source></source>的media查询是否覆盖了所有关键断点；漏掉一个，就可能 fallback 到不匹配的图 - 避免给
<img alt="CSS响应式图片进阶_HTML5 picture标签与CSS的配合" >设固定width/height后再用object-fit—— 这会导致像素密度误判，高 DPR 下加载低分辨率图 - 常用组合：
object-fit: contain+background-color填充留白；object-fit: cover+object-position微调裁剪焦点（如object-position: center top） - 写
srcset="icon-100.svg 100w, icon-200.svg 200w"没用，除非你同时写sizes="(max-width: 480px) 50vw, 100px"并确保计算结果匹配 - 更稳妥的做法：用
<source type="image/svg+xml"></source>+media，把 SVG 当成不同格式来切，而非不同分辨率 - 注意：部分旧版 Safari 对 SVG in
<picture></picture>支持不稳定，建议加<img src="fallback.png" alt="CSS响应式图片进阶_HTML5 picture标签与CSS的配合" >保底
HTML5 picture + CSS object-fit 配合时，图片变形或留白怎么调
object-fit 控制的是 <img alt="CSS响应式图片进阶_HTML5 picture标签与CSS的配合" > 内容如何适应其盒模型，和 <picture></picture> 无关，但它会放大/缩小最终选中的那张图——所以选图不准时，object-fit 会让问题更明显。
比如 object-fit: cover 要求宽高比严格匹配容器，但如果你的 <source></source> 提供的都是 4:3 图，而容器是 16:9，就会裁掉大量内容。
picture 标签嵌套 SVG 时，srcset 不生效的典型原因
SVG 本身是矢量，理论上不需要多倍图，但很多人仍想用 srcset 提供不同尺寸的 SVG 文件（比如简化版图标用于小屏），结果发现浏览器始终加载第一个。
根本原因是：SVG 不支持基于像素密度的 srcset 切换（1x/2x），只支持基于宽度的切换（100w/200w），而且必须配合正确的 sizes 才能触发。
最麻烦的不是语法写不对，而是你以为浏览器按你写的逻辑选图，其实它在背后做了 layout、DPR、缓存、预加载等多个维度的权衡。调试时别只盯 HTML，要打开 Network 面板看真实请求的 URL 和响应头里的 Content-Length。
