sizes不写会导致浏览器无法获知图片在页面中的实际渲染宽度，只能按默认100vw估算，从而加载过大或过小的图片，引发拉伸、模糊或cls；它必须与srcset配合使用，通过媒体条件+长度值（如vw、px）精准告知各断点下图片的css像素宽度。
为什么 sizes 不写就容易拉伸或加载错图
浏览器在解析 srcset 时，**不会自动知道这张图在页面上占多宽**。它只看到一堆候选图片和它们的像素宽度（比如 320w、768w），但不知道“当前这个 <img> 在视口里实际渲染多宽”。没有 sizes，浏览器只能按默认规则（通常是 100vw）估算，结果常导致：小屏加载大图、大屏拉伸模糊、甚至布局偏移（CLS）。sizes 就是告诉浏览器：“这张图在不同断点下，CSS 渲染宽度大概是多少”。
sizes 的值怎么写才不被忽略
它的值是一组用空格分隔的“媒体条件 + 宽度描述”，浏览器从左到右匹配第一个满足的条件，取对应的宽度值作为该图的“渲染宽度”。常见写法包括：
-
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"—— 表示：小屏占满宽度，中屏占一半，其余情况占 1/3 视口宽 -
sizes="50vw"—— 简单粗暴，全屏都按视口一半算（适合固定比例容器） -
sizes="(min-resolution: 2dppx) 500px, 1000px"—— 按设备像素比选，但兼容性弱，慎用
注意：sizes 中的宽度单位只能是 vw、px、em、rem，不能是 % 或 ch；且必须和 CSS 实际渲染宽度逻辑一致，否则预估失准。
srcset 和 sizes 必须配对生效
单独写 srcset 只能靠浏览器瞎猜；单独写 sizes 则完全无效（会直接被忽略）。二者必须同时存在，且语义对齐：
-
srcset提供的是“图片资源的固有宽度（w）或像素密度（x）” -
sizes提供的是“这张图在页面上的预期渲染宽度” - 浏览器用两者做除法，算出需要的“设备像素比”（DPR），再选最接近的源
例如：<img srcset="pic-320w.jpg 320w, pic-768w.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw">。当用户在 400px 宽手机上看，sizes 算出渲染宽 ≈ 400px，浏览器就会倾向选 320w 图（接近且不超）；若在 1200px 宽桌面看，sizes 算出 ≈ 600px，就可能选 768w 图。
调试时怎么看浏览器到底选了哪张图
Chrome DevTools 的 Network 面板里，刷新后过滤 img，点开对应请求的 Headers → Request Headers → Sec-Fetch-Dest: image 下方看不到直接提示，但可以：
- 右键图片 → “Open in new tab”，看 URL 是否带参数或是否为预期文件名
- 在 Elements 面板选中
<img>，右侧 Computed 标签页搜width，确认实际渲染宽度是否和sizes预期一致 - 临时加
style="border: 2px solid red;"观察布局，避免 CSS 覆盖导致sizes失效（比如父容器display: flex且没设flex-shrink: 0）
最容易被忽略的是：CSS 设置了 max-width 或 object-fit，但 sizes 还按原始宽度写——这时候浏览器按 sizes 算出来的“目标宽度”和真实渲染宽度脱节，选图就不可控了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
