仅用<picture>和<source>无法防止布局错乱，必须为<img>设置width/height或aspect-ratio，并配合sizes属性精准匹配图片尺寸，三者缺一不可。
直接用 <picture> 标签本身并不能避免布局错乱——它只是个容器，真正起作用的是内部的 <source> 和最终的 <img>，且必须配合明确的尺寸控制策略。
为什么只写 <picture> + <source> 还是会抖动/跳动
浏览器在加载前不知道图片尺寸，即使 <source> 指定了不同分辨率的图，若 <img> 缺少 width/height 或 CSS 尺寸约束，渲染时仍会先占位 0×0 或默认内联尺寸，等图加载后再重排（reflow），造成布局偏移（layout shift）。
- 常见现象：
CLS（Cumulative Layout Shift）分数飙升，尤其在慢网或首屏大图场景 -
<source media="(min-width: 768px)">切换时，若新图宽高比和旧图不一致，且没设aspect-ratio，也会拉伸或留白 - 现代浏览器虽支持
intrinsicsize，但兼容性差（仅 Chromium 116+），不可依赖
必须给 <img> 设定明确的宽高或宽高比
这是最简单有效的防抖方案。优先用 CSS 控制，避免内联属性污染语义。
- 推荐写法：
<img src="fallback.jpg" width="800" height="450" alt="" style="aspect-ratio: 16/9;">——width/height提供初始占位，style="aspect-ratio: 16/9"确保响应式缩放时不变形 - 若需完全响应式（如全宽横幅），至少设
style="aspect-ratio: 16/9; width: 100%;"，禁止只写width: 100%不设高或宽高比 - 避免用
max-width: 100%单独控制，它不提供占位信息，仍可能触发重排
配合 <source> 的 type 和 sizes 属性精准匹配
光靠 media 查询不够，sizes 才决定浏览器选哪张图，错误设置会导致高 DPR 设备加载小图（模糊）或低 DPR 加载大图（浪费）。
立即学习“前端免费学习笔记（深入）”；
-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"告诉浏览器：“在小屏下这张图占满视口宽，在中屏下占一半，大屏固定 800px 宽” - 对应
<source srcset="img-400w.jpg 400w, img-800w.jpg 800w, img-1200w.jpg 1200w" sizes="...">，浏览器据此选最接近的宽度源 - 漏写
sizes时，浏览器默认按 100vw 计算，容易选错图，间接加剧加载延迟和布局等待
真正防错乱的核心不是标签嵌套多深，而是让浏览器在图片加载前就“知道它该占多大地方”。<picture> 只是能力入口，width/height、aspect-ratio、sizes 这三者缺一不可——尤其是 aspect-ratio，很多人写了 <source> 却忘了它，结果换图后比例突变，布局照样崩。
