picture 元素是“选图器”而非“裁图器”，需预先提供多张不同构图的图片；仅当移动端与PC端需表达不同视觉重点（如Banner特写vs全景）时才适用，否则用img+CSS即可。

元素本身不裁剪图片，它只是根据条件（如屏幕宽度、方向、像素密度）选择**你已预先裁剪好**的不同构图版本。所谓“移动端裁剪不同”，本质是：为小屏提供一张专为手机构图优化的图（比如突出脸部、竖构图），为桌面提供另一张宽幅、全景或横构图的图——所有裁剪工作必须在上传前完成。 核心逻辑就一条：picture 是“选图器”，不是“裁图器”。

明确适用场景：艺术方向（art-direction）

只有当移动端和 PC 端需要表达不同视觉重点时，才该用 。例如：

• 首页 Banner：手机端只显示人物面部特写，PC 端展示完整场景+文字布局
• 产品图：移动端聚焦细节纹理，PC 端展示全貌+多角度组合
• 头图海报：手机用竖版 9:16 构图，PC 用横版 16:9 或超宽幅

如果只是同一张图缩放显示（比如 PC 图拉伸/压缩到手机上），用 img + CSS（max-width: 100%）就够了， 反而增加冗余。

正确写法：source 按断点从宽到窄排列，img 作兜底

浏览器按 <source> 顺序线性匹配，遇到第一个满足 media 的就停，后面全部忽略。所以必须：

• <source> 按屏幕宽度从大到小排序（如 (min-width: 1200px) → (min-width: 768px) → (max-width: 767px)）
• 每个 srcset 指向一张**独立裁剪、独立导出**的图，不能是同一张图的缩放副本
• <img> 必须存在，且含 src 和 alt，它是所有条件都不匹配时的默认 fallback，也是不支持 的老浏览器的兜底

示例代码：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

<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="团队协作场景">
</picture>

常见失效原因与避坑要点

• media 写错括号：写成 media="max-width: 768px"（缺括号）→ 静默失效；必须是 media="(max-width: 767px)"
• source 放在 img 后面：浏览器直接跳过所有 <source>，只加载 <img src>
• 断点重叠或顺序反了：比如 (min-width: 768px) 和 (max-width: 768px) 并存 → 768px 宽度永远命中前者，后者永不执行
• 没给小屏提供等效信息量：移动端只裁出空白背景或严重缺失主体，用户看不懂——这违背 art-direction 初衷

配套准备：你得先有三张图

别指望 帮你裁。你需要提前准备好：

• hero-mobile.jpg：专为 ≤767px 屏幕设计，竖构图、主体居中、文字精简、关键信息前置
• hero-tablet.jpg：适配 768–1199px，稍宽、可容纳更多图文元素
• hero-desktop.jpg：≥1200px 使用，横幅、高宽比适配大屏、细节丰富

这些图建议用 Photoshop、Figma 或在线工具手动裁剪导出，确保每张都独立优化过视觉重心和文字可读性。