标签提供声明式资源选择机制，依赖 的 media 与 srcset 配合实现按屏幕宽度切换图片， 为必需兜底；常见只加载一张图的原因包括 media 条件重叠、缺 、srcset 路径 404 或缓存未清；适配高 DPR 应用 x 或 w（不可混用），sizes 必须写在 上且需与 CSS 容器宽度一致。
<picture></picture> 标签本身不“响应式显示图片”，它只是提供了一套**声明式资源选择机制**；真正起作用的是里面的 <source></source> 规则 + 浏览器根据当前视口、设备像素比、MIME 类型等条件的匹配逻辑。
怎么写 <source></source> 才能按屏幕宽度切换图片
核心是用 media 属性配合 srcset，让浏览器在不同断点加载对应尺寸的图：
-
media值必须是有效的媒体查询（如(max-width: 768px)），不能写成768px或small -
srcset里可以放多个路径，用逗号分隔；每个路径后可加w（表示该图的自然宽度）或x（表示设备像素比），例如logo-400w.jpg 400w, logo-800w.jpg 800w -
<img alt="html5的picture标签怎么响应式显示图片_多尺寸适配技巧【教程】" >标签仍是必需的，作为兜底：当所有<source></source>都不匹配时，浏览器会加载它的src和srcset
<picture> <source media="(max-width: 480px)" srcset="hero-sm.jpg"> <source media="(max-width: 768px)" srcset="hero-md.jpg"> <source media="(min-width: 769px)" srcset="hero-lg.jpg"> <img src="hero-fallback.jpg" alt="Hero image"> </picture>
为什么用了 <picture></picture> 还是只加载一张图
常见原因不是语法错，而是浏览器按规则“选中且仅选中一个”：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 多个
<source></source>的media条件重叠（比如写了(max-width: 768px)和(max-width: 1024px)），浏览器取第一个匹配项，后面的直接忽略 - 漏写
<img alt="html5的picture标签怎么响应式显示图片_多尺寸适配技巧【教程】" >，导致无兜底，某些情况下会渲染空白或 fallback 到alt文本 -
srcset路径 404，但浏览器不会报错，只会静默跳过该<source></source>，继续往下找 - 开发工具 Network 面板没清缓存，看到的仍是之前加载过的图 —— 建议勾选 “Disable cache” 并硬刷新
适配高 DPR 设备（如 Retina 屏）要不要加 x？
要，但别和 w 混用在同一 srcset 里。两者是互斥的描述方式：
立即学习“前端免费学习笔记（深入）”；
- 用
w（推荐）：告诉浏览器“这张图宽 800 像素”，由浏览器结合sizes属性算出需要多大物理尺寸，再选最接近的源。适合响应式布局 - 用
x：直接指定“这个源适用于 2x 屏幕”，例如icon@2x.png 2x。适合固定尺寸图标，不随布局变化 -
sizes必须写在<img alt="html5的picture标签怎么响应式显示图片_多尺寸适配技巧【教程】" >上（不是<source></source>），例如sizes="(max-width: 600px) 100vw, 50vw"
<picture>
<source media="(max-width: 600px)" srcset="banner-400w.jpg 400w, banner-800w.jpg 800w">
<source media="(min-width: 601px)" srcset="banner-800w.jpg 800w, banner-1600w.jpg 1600w">
<img src="banner-800w.jpg"
srcset="banner-400w.jpg 400w, banner-800w.jpg 800w, banner-1600w.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Banner">
</picture>
实际项目中最容易被忽略的，是 sizes 属性没同步更新 —— 它和 CSS 中图片容器的实际宽度不一致时，w 描述就失效了，浏览器可能选错源。务必在调整布局后重新核对 sizes 值。
