HTML中使用srcset和sizes实现响应式图片的完整教程-html教程-PHP中文网

srcset 与 sizes 必须协同使用且语法严格合法，否则浏览器直接忽略 srcset、退化为加载 src；w 描述符必须配 sizes，sizes 值需逗号分隔、带单位、最后一项无媒体条件，且不可混用 w/x 描述符。

html中使用srcset和sizes实现响应式图片的完整教程

srcset 和 sizes 不是“用不用”的问题，而是“怎么配才不白写、不拉垮加载、不被浏览器忽略”的问题。直接上结论：浏览器只在 img 元素有 src 或 srcset 且 sizes 语法合法时才触发响应式选择；缺一不可，写错一个字符就退化成单图加载。

为什么浏览器完全无视你的 srcset？

最常见原因是 sizes 值语法非法或缺失。浏览器看到 sizes="100vw" 会尝试解析，但如果写成 sizes="100vw, (min-width: 768px) 50vw"（逗号后没空格）或漏了单位（如 50 而非 50vw），整个 sizes 就被丢弃——此时 srcset 降级为仅提供像素密度切换（2x 那种），不再做宽度适配。

sizes 必须是用逗号分隔的“媒体条件 + 空格 + 长度值”列表，最后一项不能带条件（作为默认）
媒体条件必须用括号包裹，例如 (min-width: 768px)，不能写成 min-width: 768px
长度值必须带单位：100vw ✅，100% ❌（CSS 长度单位不支持 %）
如果页面未设置 viewport meta，某些 Android 浏览器可能无法正确计算 vw

srcset 的两种写法：w 描述符 vs x 描述符，别混用

srcset 支持两种描述符：w（表示图像固有宽度）和 x（表示设备像素比）。二者语义不同，不能混在同一属性里——浏览器遇到 srcset="a.jpg 400w, b.jpg 2x" 会直接忽略整个属性。

用 w 描述符时，必须配合 sizes，否则浏览器无法知道“这张图在页面中占多宽”，也就无法选源
用 x 描述符时，sizes 可省略，但只能应对 DPR 变化（比如 Retina 屏），无法响应布局宽度变化（比如侧边栏展开/收起）
推荐优先用 w + sizes：更贴近真实响应式场景，兼容性也好（IE 不支持，但现代浏览器全支持）

正确示例：srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

如何验证浏览器到底选了哪张图？

别靠肉眼猜，也别只看 Network 面板里哪个请求发出了——那是资源加载结果，不是选择逻辑。真要调试，得看 img 元素的 Computed 标签页里的 currentSrc 属性，或者用 JS 打印：

const img = document.querySelector('img');
console.log(img.currentSrc); // 实时反映浏览器最终选用的地址

注意：currentSrc 在图片尚未加载完成时可能是空字符串；监听 load 事件再读更稳妥。另外，Chrome DevTools 的 Network → Filter → “Large resources” 可快速定位是否意外加载了超大图（比如本该加载 400w 却加载了 1200w）。

移动端 viewport 和 CSS width 影响远比你想象的大

sizes 中写的 50vw 是按视口宽度算的，但如果你页面没设 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 会以 980px 视口渲染，50vw 就变成 490px，导致选图严重偏大。更隐蔽的是：如果图片父容器用了 max-width: 100% 但没设 width，CSS 渲染时宽度可能受外层 flex/grid 影响浮动，而 sizes 是纯基于视口计算的，两者脱节就会选错。

务必检查 viewport meta 是否存在且生效
如果图片放在响应式网格中（如 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))），sizes 很难精确匹配——这时更适合用 picture + media，而非硬凑 sizes 表达式
sizes 不支持 calc()，也不能引用 CSS 变量，所有值必须是静态字面量

复杂布局下，sizes 的表达能力很快见顶。这时候与其反复调参，不如承认：它只适合“宽度阶梯明确”的场景，比如文章正文图片固定占满容器、卡片图统一为 33vw —— 超出这个范围，就得换方案。