picture 元素不裁剪图片，仅按 media 条件分发预设的多构图版本；需手动导出 mobile/tablet/desktop 三图，严格按从大到小顺序书写 source，并确保 img 为必填降级项。

元素本身不裁剪图片，它只负责“选图”——把提前准备好的、不同构图的图片，按设备条件精准分发给浏览器。所谓“艺术指导式裁剪”，核心在于你手动为不同屏幕尺寸导出适配的版本，比如：

• 手机端：竖构图，突出人物脸部
• 平板端：中等宽高比，保留关键场景
• 桌面端：横幅大景深，展现完整环境

浏览器拿到这些图后，根据 <source></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>
• <source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source>
• <source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source>
• <img src="hero-mobile.jpg" alt="首页主视觉：城市天际线">

注意四点：

• media 属性只能写在 <source></source> 上，不能挂在 <picture></picture> 标签上
• 括号不能省，"(max-width: 767px)" 才有效，"max-width: 767px" 会静默失效
• <source></source> 必须全部写在 <img> 之前，否则浏览器直接跳过
• <img> 是强制存在的降级节点，必须带 src 和 alt，且不能自闭合（不能写成 <img>）

避免断点重叠和顺序反错
比如这样写就危险：

• <source media="(max-width: 768px)" ...></source>
• <source media="(min-width: 768px)" ...></source>

768px 宽度会永远匹配第一条，第二条永远不会触发。推荐统一用 max-width: 767px 和 min-width: 768px 划分边界，清晰无歧义。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

可叠加分辨率适配（进阶）
如果还要兼顾高清屏，可在 <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></picture> 管“用哪张构图”，<img> 内部管“这张构图用哪个分辨率”，两层逻辑互不干扰。

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！