picture标签不自动处理图片比例，仅通过media、srcset和sizes实现人工构图切换；必须用合法媒体查询（如(max-width: 480px)）、覆盖所有断点、正确设置sizes（仅在img上）、提供带src和alt的兜底img，且构图与分辨率适配需分离。

picture 标签不处理“比例”，只做资源匹配

浏览器不会根据图片宽高比（aspect ratio）自动选图。picture 本身没有 aspect-ratio 或类似语义属性，它只响应你写的 media、srcset 和 sizes。所谓“不同比例的图片”，实际是靠你主动提供构图不同的源文件（比如竖版裁切 vs 横版全景），再用 media 控制在什么视口宽度下用哪张——比例差异是人为设计的结果，不是标签自动识别的特征。

用 media 匹配断点，为不同视口提供不同构图图片

这是实现“不同比例”的唯一可靠方式，也就是 art direction。关键不是图片本身宽高比多少，而是你为哪个断点配了哪张图。

• media 值必须是合法 CSS 媒体查询，带括号，例如 (max-width: 480px)，写成 max-width: 480px 会被完全忽略
• 断点顺序影响匹配结果：浏览器从上到下找第一个为真的 source，匹配后立即停止，后续全部跳过
• 小屏用竖构图（如 4:5 人像特写），桌面用横构图（如 16:9 全景），两张图物理尺寸和比例可以完全不同
• 每个 source 的 srcset 可只写一个路径（如 hero-mobile.jpg），不用加 1x/2x——那是分辨率适配的事，和构图无关
• 必须确保所有断点覆盖常见视口，避免间隙。例如用 (max-width: 480px) → (min-width: 481px) and (max-width: 1024px) → (min-width: 1025px)

sizes 必须写在 <img> 上，否则 w 描述符失效

如果你在 srcset 里用了 w 描述符（比如 hero-400w.jpg 400w），sizes 就不是可选项，而是强制要求——而且只能写在末尾的 <img> 标签上，<source> 上写的 sizes 会被浏览器直接忽略。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• sizes 告诉浏览器：“这张图在页面中大概占多宽”，例如 sizes="(max-width: 480px) 100vw, 50vw"
• 浏览器用这个宽度 × 当前设备 DPR，去匹配 srcset 中最接近的 w 值
• 不写 sizes 时，浏览器默认按 100vw 计算，可能导致小屏加载远超需要的大图（如 iPhone 加载 1440w 图）
• 如果只做构图切换、没用 w 描述符，sizes 可省略，但建议仍加上，防止未来扩展时出错

兜底 <img> 缺一不可，且必须含 src 和 alt

所有 source 都不匹配时，或浏览器根本不认识 picture（如旧版 IE），就会回退到这个 img。漏掉它，区域就是空白。

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

• <img> 是 <picture> 的最后一个子元素，位置不能错
• src 必须指向一个真实存在的图片，404 不报错，只会静默 fallback，调试得靠 Network 面板清缓存后确认
• alt 必须存在，这是可访问性的硬性要求，也是唯一一处能写描述文本的地方
• 即使你只为构图切换，也建议给 <img> 补上 srcset（如 hero-desktop@1x.jpg 1x, hero-desktop@2x.jpg 2x），兼顾 DPR 适配

容易被忽略的一点：构图切换和分辨率适配是两件事，可以混用，但不能混写。比如在同一个 srcset 里同时写 hero-400w.jpg 400w 和 hero@2x.jpg 2x，整个值会被浏览器忽略，直接回退到 <img src>。