需配合srcset与sizes才能精准响应式加载横幅图：sizes声明图片显示宽度，srcset提供多分辨率源，css用display:block、width:100%、height:auto及统一宽高比确保渲染正确。
<picture></picture> 不是用来“轻松”适配超宽横幅的——它本质是多源条件加载，不是拉伸/裁剪工具。真要撑满全屏宽度且不糊、不白边、不卡顿，得靠 <picture></picture> + srcset + sizes 三者配合，再叠一层 CSS 控制渲染行为。
为什么单写 常常失效
浏览器不会只看屏幕宽度做选择；它还会结合设备像素比（dpr）、sizes 声明的预期显示宽度、以及当前布局流中的可用空间来计算“该加载多大图”。只写 media 等于告诉浏览器“在 1920px 宽屏幕上用这张图”，但没说“这张图要占多宽”，结果可能：
- 横幅容器本身被 CSS 设为 width: 100vw，但父级有 padding 或 margin，实际可用宽度小于视口
- 高 DPR 屏幕（如 MacBook Retina）下，1920px 的媒体查询匹配了，却加载了仅 1920px 宽的图，显示模糊
- 没配 sizes，浏览器默认按 100vw 计算，但横幅可能有 max-width 限制，导致选图过大或过小
srcset 和 sizes 必须成对出现才可控
srcset 列出多个图源及其固有宽度（如 "hero-1200w.jpg 1200w, hero-1920w.jpg 1920w, hero-2560w.jpg 2560w"），sizes 告诉浏览器“这张图在不同断点下会显示多宽”。例如：
<picture><source srcset="hero-1200w.jpg 1200w, hero-1920w.jpg 1920w, hero-2560w.jpg 2560w" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw" media="(min-width: 1200px)"> @@##@@ </source></picture>
关键点：
- sizes 中每个条件对应的是“该图源在页面中将占据的 CSS 宽度”，不是屏幕宽度
- 这里统一写 100vw 是因为横幅设计目标就是铺满整个视口宽度（不含滚动条）
- 如果横幅外层有 max-width: 1440px，那 sizes 应改成 "(max-width: 1440px) 100vw, 1440px"，否则浏览器仍按 100vw 算，可能选错图
- <img src="hero-fallback.jpg" alt="横幅主视觉"> 的 src 是兜底，必须存在，且建议尺寸 ≥ 最小 srcset 图的宽度
CSS 渲染阶段必须加约束，否则图片会溢出或留白
<picture></picture> 只管加载哪张图，不管怎么显示。横幅常见问题：图片高度塌陷、左右被裁、上下留白。解决靠三行 CSS：
-
display: block—— 干掉<img>默认的 inline 基线对齐导致的底部空隙 -
width: 100%; height: auto—— 强制等比缩放，不拉伸变形 -
object-fit: cover—— 如果需填满固定高宽容器（如height: 50vh），用这个裁切居中，而非contain留白
注意：object-fit 对 <img> 生效，所以样式要写在 <img> 上，不是 <picture></picture>。如果横幅需要响应式高度（比如移动端压矮、桌面端拉高），别用固定 height，改用 aspect-ratio 或 padding-top 技巧保比例。
最易被忽略的一点：所有横幅图的宽高比必须一致。哪怕你写了 sizes 和多档 srcset，只要 hero-1200w.jpg 是 16:9、hero-2560w.jpg 是 21:9，CSS 用 object-fit: cover 也会导致不同设备看到的构图完全不同——左边人头被切掉，右边突然多出天空。切图时就得统一分辨率比例，而不是“越大越好”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
