如何在HTML里设置picture源-html教程-PHP中文网

中source按顺序匹配，首个media为true的立即生效，其余跳过；所有source不匹配时回退至内部的src；media属性仅在插入dom或resize时评估，不响应js动态修改。

如何在html里设置picture源

浏览器不会“综合判断”所有 source，而是从上到下扫描，**第一个 media 为 true 的就立即采用，其余全部跳过**。这和 CSS 的层叠不同，是短路逻辑。

宽屏断点要放前面，比如 media="(min-width: 1200px)"；窄屏兜底放最后，比如 media="(max-width: 767px)"
避免重叠断点：写 max-width: 768px 和 min-width: 768px，在恰好 768px 宽时行为不可控（只认第一个）
单位不能省：768 是非法媒体查询，必须写成 768px
如果所有 source 都不匹配，浏览器会回退到末尾的 <img> —— 这个元素不是可选的，漏掉或没写 src 就是空白

你给 source 元素动态改 media 属性（比如用 JS 设置 el.media = "(min-width: 900px)"），浏览器**不会重新评估匹配**。它只在元素首次插入 DOM 或窗口 resize 时触发匹配逻辑。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

常见误操作：JS 切换主题后直接改 source.media，但图片没变 —— 因为浏览器根本不监听这个属性变化
真正生效的方式只有两种：重建整个 <picture></picture> 结构，或手动触发 <img> 的 src 更新（比如 img.src = img.src 强制重载）
更稳妥的做法是：用 matchMedia() 监听断点，并在回调里显式切换 <img>.src，绕过 source 匹配机制

source 的 srcset 只负责提供「哪张图」，而 <img> 的 srcset 才负责「这张图的哪个分辨率版本」。混用会导致 DPR 适配失效。

<source srcset="a@2x.jpg 2x"></source> → 浏览器完全忽略 2x，只当普通路径用
正确做法：<source media="(max-width: 480px)" srcset="small.jpg"></source> + <img src="small.jpg" srcset="small.jpg 1x, small@2x.jpg 2x">
如果用了 w 描述符（如 photo-400w.jpg），sizes 必须写在 <img> 上，且值要和实际 CSS 布局一致；写在 <source></source> 里会被无视

media 只支持原生媒体特性（如 width、orientation、prefers-color-scheme），**不支持自定义状态**。春节红、圣诞绿这类主题无法靠 media="(theme: christmas)" 实现。

强行用 JS 改 source.media 并不能触发重选，且破坏语义和可访问性
推荐方案：预置多组 <picture></picture>，用 class 控制显隐（如 theme-christmas 显示对应 <picture></picture>，其余 display: none）
或者只留一个 <picture></picture>，但由 JS 直接更新内部 <img>.src 和 .alt，确保 fallback 和可访问性不丢