标签不控制物理尺寸，仅负责按条件选择合适图片资源；真正决定尺寸的是内部的width/height属性或css样式。
直接说结论： <picture></picture> 标签本身不控制图片物理尺寸，它只负责「按条件选择最合适的图片资源」；真正决定物理尺寸的是 <img> 的 width、height 属性或 CSS 中的 width/height/max-width 等样式。混淆这两者，是绝大多数人用 <picture></picture> 后图片依然模糊、拉伸或布局错乱的根本原因。
为什么 picture 里的 img width/height 不能省略
浏览器在解析 <picture></picture> 时，会先根据 <source></source> 的 media 或 type 匹配资源，但最终渲染仍依赖内部的 <img> 元素。如果这个 <img> 没有显式设置 width 和 height（尤其是带单位的像素值），浏览器就无法提前预留布局空间：
- 触发「布局偏移」（CLS），影响 Core Web Vitals
- 在图片加载完成前，页面高度塌陷或跳动
- 响应式场景下，
width: 100%配合无height会导致宽高比丢失，图片被压缩或拉伸
正确写法必须包含 <img> 的尺寸属性，并建议使用 height="auto" 维持比例：
<picture><source media="(min-width: 768px)" srcset="hero-large.webp" type="image/webp"><source srcset="hero-small.jpg" type="image/jpeg"> @@##@@ </source></source></picture>
如何用 sizes + srcset 精确匹配设备物理宽度
sizes 属性不是可选的「锦上添花」，而是让浏览器在加载前就知道「这张图在当前视口下应该占多宽」的关键线索。它直接影响浏览器从 srcset 中选哪个资源：
-
sizes="100vw"：告诉浏览器“这张图永远占满整个视口宽度” -
sizes="(min-width: 768px) 50vw, 100vw"：在 >=768px 时占视口一半，否则占满 - 若
sizes写错（比如写成"500px"却没考虑缩放），浏览器可能选错分辨率资源，导致高清屏下模糊
搭配 srcset 使用时，单位必须统一为 x（设备像素比）或 w（源图固有宽度）：
@@##@@
CSS 中 max-width: 100% 的真实作用边界
很多人以为加一句 img { max-width: 100%; height: auto; } 就万事大吉，但它只解决「不溢出容器」，不解决「物理尺寸精度」：
- 当父容器是
flex或grid且未设宽高时，max-width: 100%可能退化为 0 - 在 DPR > 1 的设备上，若
<img src="hero-small.jpg" style="max-width:90%" style="max-width:90%" alt="主视觉图">的width/height仍按逻辑像素写（如width="800"），而实际加载的是 2x 图，浏览器会按 800px 渲染，导致图片被缩小显示（虽清晰但小了一半） - 更稳妥的做法是：用
width/height设定「期望的 CSS 像素尺寸」，再靠srcset+sizes提供对应 DPR 的资源
例如目标是「在所有设备上都显示为 400px 宽的图片」，就该这样写：
@@##@@
真正难的不是写对标签，而是理解 <picture></picture> 是资源调度层，<img src="fallback.jpg" srcset="hero-400w.jpg 400w,
hero-800w.jpg 800w,
hero-1200w.jpg 1200w" sizes="(min-width: 768px) 50vw, 100vw" style="max-width:90%" height="450" alt="..."> 才是渲染锚点——物理尺寸必须由后者锁定，前者只负责把对的图送到对的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
