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></source> 上写的 sizes 会被浏览器直接忽略。
-
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></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>。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
