picture标签不裁图只选图；多端裁剪不一致的根源是未提供语义匹配的预裁图或匹配逻辑错误；media属性必须正确书写、source顺序须从宽到窄、img为必需fallback节点且需完整闭合。
picture 标签本身不剪裁图片，它只选图；多终端剪裁不一致问题的根源，是你没提供语义匹配的预裁图，或
为什么写了 media 却总加载同一张图
这不是浏览器不支持，而是 <source></source> 的匹配机制在静默失效：
-
media属性写在<picture></picture>标签上（如<picture media="(max-width:768px)"></picture>）→ 浏览器直接忽略整个属性 -
media="(max-width: 768px)"缺少括号 → 写成media="max-width: 768px"就静默失效 -
<source></source>放在<img>后面 → 浏览器跳过所有<source></source>，只加载<img src> - 断点重叠，比如同时存在
(min-width: 768px)和(max-width: 768px)→ 768px 宽度行为未定义，Chrome 可能命中第一个，Safari 可能跳过 -
<source></source>顺序不是从宽到窄 → 浏览器线性扫描，遇到第一个为 true 就停，后面全丢弃
source 的 media 顺序必须严格从宽到窄
浏览器不“计算最优”，只“取第一个匹配”。顺序错了，宽屏设备永远拿不到桌面图：
- ✅ 正确（桌面 → 平板 → 手机）：
<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"></source>，<source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source>，<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source> - ❌ 错误（手机规则放最前）：
<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source>→ 所有 ≤767px 的设备都走这条，后面两条完全无效 - ⚠️ 断点别留缝隙：用
max-width: 767px+min-width: 768px，而不是max-width: 768px+min-width: 769px，否则 768px 宽度可能无匹配源
img 标签不是可选的，是强制 fallback 节点
漏掉、写错或自闭合，会导致图片区域空白，尤其在 Safari 或低版本 iOS 上：
- 必须存在，且必须带
src和alt属性（如<img src="hero-fallback.jpg" alt="首页横幅">） - 不能写成
<img>或<img>，必须是完整闭合标签 - 如果 fallback 图也要适配 Retina 屏，推荐给
<img>加srcset和sizes，例如：<img src="hero-fallback-1x.jpg" srcset="hero-fallback-1x.jpg 1x, hero-fallback-2x.jpg 2x" sizes="(max-width: 480px) 100vw, 50vw"> - 所有
src和srcset中的路径必须真实存在；404 不报错，只会静默 fallback —— 调试得靠 Network 面板清缓存后确认实际加载项
type 属性和服务端 MIME 类型必须严丝合缝
<source type="image/webp"></source> 失效，90% 是因为服务端没返回对应类型：
-
type="image/webp"必须对应服务器响应头Content-Type: image/webp，大小写、拼写、空格全要一致 -
type="webp"或type="image/jpg"都是非法值，会被浏览器静默丢弃 - Network 面板里看到
blocked:mime-type或 404，基本就是type和服务配置对不上 - 用 WebP 时建议三层 fallback：
<source type="image/webp" srcset="hero.webp"></source>+<source type="image/jpeg" srcset="hero.jpg"></source>+<img src="hero.jpg" alt="...">
真正麻烦的从来不是写几行 HTML，而是每张裁切图是否精准对应设计意图——桌面展全景、平板保上半身、手机锁人脸，三张图的焦点、比例、导出尺寸，一个都不能含糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
