<picture>仅负责资源选择，缩放由CSS控制，清晰度靠DPR匹配与构图一致；srcset更适合纯DPR适配，而<picture>仅在需不同断点不同构图时才必要。
<picture> 标签本身不负责“缩放”，也不处理清晰度保持——它只做资源选择。所谓“无缝缩放且主体清晰”，其实是两个独立问题的组合：缩放行为由 CSS 控制，清晰度由 DPR（设备像素比）匹配和构图控制。用 <picture> 去强行解决缩放，反而容易出错。
为什么直接用 <img srcset> 更适合纯 DPR 清晰度适配
浏览器对 srcset 中 2x、3x 的解析是原生且可靠的，只要写法规范，就能按 window.devicePixelRatio 自动选最接近的高倍图：
-
src必须存在，它是所有旧浏览器（如 IE）和 DPR 不匹配时的 fallback -
srcset里只能混用x描述符，例如"icon@2x.png 2x, icon@3x.png 3x"；混入w（如"icon-400w.jpg 400w"）会导致整个值被 Chrome 忽略 - 所有
@1x/@2x图必须构图一致、CSS 渲染尺寸一致，否则高倍图拉伸后主体会模糊或错位 - 服务器返回的 MIME 类型必须正确（
image/png，不是text/plain），HTTP 状态码不能是404，否则降级到src
什么情况下才需要 <picture> 来保主体清晰
只有当「不同断点需不同构图」时，<picture> 才有价值——比如手机端裁掉背景只留人脸，桌面端展示全身。这时主体清晰不是靠放大，而是靠人工裁剪+针对性 DPR 适配：
- 每个
<source>的media必须加括号：(max-width: 767px)✅，max-width: 767px❌（后者整条被跳过） - 多个
media断点不能重叠，推荐开区间写法：(max-width: 767px)→(min-width: 768px) and (max-width: 1200px) - 每个
<source>的srcset只管自己断点内的 DPR 适配，不跨断点生效 - 末尾的
<img>仍需带src（最好也带srcset），否则不支持<picture>的浏览器会空白
缩放行为必须靠 CSS，不是 <picture> 的职责
<picture> 不改变图片渲染尺寸，它只换 src。真正控制缩放的是 CSS：
立即学习“前端免费学习笔记（深入）”；
- 等比缩放首选：
max-width: 100%; height: auto;—— 宽度不超容器，高度由原始比例自动计算 - 避免
width: 100%; height: auto：强制宽度拉满但父容器宽高不固定时，会破坏比例 - 如果容器尺寸固定（如卡片缩略图高 180px），建议同时加
max-height: 100%防纵向溢出 -
object-fit只在容器有明确宽高时有效，对普通流式布局的<img>不起作用；它适合<video>或背景图场景
真正容易被忽略的点是：所有 @2x 图片必须和 @1x 构图完全一致，且服务器要返回正确的 MIME 类型和状态码。否则即使写了 srcset，浏览器也会静默降级，你根本看不出问题在哪。
