sizes属性用于告诉浏览器图片在当前布局下预计占据的视口宽度（如vw或px），必须与srcset配合使用；浏览器据此从srcset的w值中选出最匹配的资源，缺sizes则默认按100vw选图导致小屏加载大图。

sizes 属性用于告诉浏览器：在当前页面布局下，这张图片**预计会占据多宽的视口宽度（vw）**，从而帮助浏览器从 srcset 中选择最合适的图片资源。

理解 sizes 的核心作用

浏览器无法自动知道你用 CSS 把图片设成了 “300px”、“50vw” 还是 “100% 容器宽”。sizes 就是手动告诉它：“在某种条件下，这张图大概占多少视口宽度”。这个信息和 srcset 中的宽度描述（如 400w）配合，才能让浏览器算出哪个源最匹配当前渲染尺寸。

基本语法和常见写法

sizes 的值是一组“媒体条件 + 宽度描述”的组合，用逗号分隔。浏览器从左到右匹配第一个满足的条件，取对应宽度作为图片的“预期显示宽度”。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• sizes="100vw"：不管什么屏幕，都按整个视口宽显示（比如全屏 banner 图）
• sizes="(max-width: 768px) 100vw, 50vw"：小屏占满，大屏占一半视口宽
• sizes="(min-width: 1200px) 400px, (min-width: 768px) 300px, 100vw"：明确指定不同断点下的固定像素宽（注意：这里 px 是“CSS 像素”，不是物理像素）

必须搭配 srcset 才生效

sizes 单独写没用，必须和 srcset 一起用。例如：

@@##@@  srcset="small.jpg 400w,<br>        medium.jpg 800w,<br>        large.jpg 1200w"<br>  sizes="(max-width: 480px) 100vw,<br>      (max-width: 900px) 50vw,<br>      33vw">

当视口宽 ≤480px，浏览器认为图占 100vw → 约 480px → 选 400w 或 800w 源；
当视口宽 481–900px，图占 50vw → 约 450px → 同样倾向 400w/800w；
更大屏幕占 33vw → 约 660px → 更可能选 800w。

注意事项

• 宽度单位只能是 vw、px、em、rem 等绝对或相对长度，不能是百分比（如 50%）
• 最后一个条件可以不带媒体查询，作为默认 fallback（如上面例子末尾的 33vw）
• 如果省略 sizes，浏览器会按“图片自然宽”或“CSS 渲染宽”估算，但不可靠，尤其响应式布局中容易选错
• Chrome DevTools 的 Network 面板里，鼠标悬停图片请求能看到 “Size chosen by browser”，可验证是否按预期工作

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！