picture 元素不裁剪图片，仅按 media 条件分发预设的多构图版本；需手动导出 mobile/tablet/desktop 三图，严格按从大到小顺序书写 source，并确保 img 为必填降级项。
- 手机端：竖构图，突出人物脸部
- 平板端：中等宽高比，保留关键场景
- 桌面端：横幅大景深，展现完整环境
浏览器拿到这些图后，根据 <source> 的 media 条件自动挑一张加载。
必须提前准备好多张图
不能指望浏览器实时裁剪。你要用图像编辑工具（如 Photoshop、Figma 或命令行工具 ImageMagick）导出三张独立文件：
-
hero-mobile.jpg（如 400×800） -
hero-tablet.jpg（如 800×600） -
hero-desktop.jpg（如 1920×600）
正确书写 picture 结构
顺序决定结果，浏览器从上到下扫描，命中第一个就停：
-
<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"> -
<source media="(min-width: 768px)" srcset="hero-tablet.jpg"> -
<source media="(max-width: 767px)" srcset="hero-mobile.jpg"> <img src="hero-mobile.jpg" alt="首页主视觉：城市天际线">
注意四点：
-
media属性只能写在<source>上，不能挂在<picture>标签上 - 括号不能省，
"(max-width: 767px)"才有效，"max-width: 767px"会静默失效 -
<source>必须全部写在<img>之前，否则浏览器直接跳过 -
<img>是强制存在的降级节点，必须带src和alt，且不能自闭合（不能写成<img />）
避免断点重叠和顺序反错
比如这样写就危险：
-
<source media="(max-width: 768px)" ...> -
<source media="(min-width: 768px)" ...>
768px 宽度会永远匹配第一条，第二条永远不会触发。推荐统一用 max-width: 767px 和 min-width: 768px 划分边界，清晰无歧义。
可叠加分辨率适配（进阶）
如果还要兼顾高清屏，可在 <img> 上加 srcset 和 sizes：<img src="hero-mobile.jpg" srcset="hero-mobile.jpg 1x, hero-mobile@2x.jpg 2x" sizes="(max-width: 767px) 100vw, 800px" alt="...">
这时 <picture> 管“用哪张构图”，<img> 内部管“这张构图用哪个分辨率”，两层逻辑互不干扰。
立即学习“前端免费学习笔记（深入）”；
不复杂但容易忽略
