HTML5原生图片响应方案分两种：+按媒体查询切换不同构图/尺寸图，需兜底；的srcset+sizes按视口宽度选合适分辨率图，需sizes匹配CSS容器宽度。

标签是 HTML5 中实现“按屏幕自动切换图片”的原生方案，它不靠 JavaScript，而是由浏览器根据当前视口宽度、设备像素比等条件，自动选择最合适的图片资源。

---

用 <picture></picture> + <source></source> 按宽度切换不同构图或尺寸的图

适合场景：移动端用竖版裁剪图，桌面端用横版大图；或不同分辨率下加载不同尺寸文件。

• 每个 <source></source> 标签写一条媒体查询（media），配合 srcset 指定对应图片路径
• 浏览器从上到下匹配，第一个满足条件的 <source></source> 就生效
• 必须在最后放一个 <img alt="HTML5 中响应式图片怎么实现才能根据屏幕自动切换" > 作为兜底，否则无图可显示

示例：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<picture>
  <source srcset="hero-desktop.jpg" media="(min-width: 1024px)">
  <source srcset="hero-tablet.jpg"  media="(min-width: 768px)">
  <img src="hero-mobile.jpg" alt="活动主视觉">
</picture>

注意：media 值必须是完整媒体查询，比如 (max-width: 767px)，不能只写 767px。

---

用 <img alt="HTML5 中响应式图片怎么实现才能根据屏幕自动切换" > 的 srcset + sizes 按视口宽度选合适分辨率图

适合场景：同一张图，只换尺寸（如 400w / 800w / 1200w），保持构图一致，节省带宽。

立即学习“前端免费学习笔记（深入）”；

• srcset 列出多个图源及它们的自然宽度（单位 w）
• sizes 告诉浏览器：“这张图在不同断点下占容器多宽”，例如 (max-width: 768px) 100vw, 50vw
• 浏览器结合两者，选出不小于容器预期宽度的最小可用图

示例：

<img 
  src="photo-400w.jpg"
  srcset="photo-400w.jpg 400w,
          photo-800w.jpg 800w,
          photo-1200w.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 768px) 50vw,
         33vw"
  alt="风景照">

关键点：sizes 必须与实际 CSS 容器宽度逻辑一致，否则选图会偏大或模糊。

---

配合 CSS 实现基础缩放与防失真

光有 HTML 资源切换还不够，图片样式也得跟上：

• 给 <img alt="HTML5 中响应式图片怎么实现才能根据屏幕自动切换" > 加 max-width: 100% 和 height: auto，确保它能随容器缩放且不拉伸
• 父容器要有明确宽度（如 width: 100% 或 max-width: 800px）
• 如果父容器是 Flex 项，记得加 min-width: 0，防止 flex 默认的 min-width: auto 锁死收缩

错误写法：

img { width: 100%; height: 100%; } /* 强制拉伸，必变形 */

正确写法：

img { max-width: 100%; height: auto; }

---

补充：高 DPR 设备（如 Retina 屏）怎么适配

• 用 x 单位表示设备像素比：logo@2x.png 2x, logo@3x.png 3x
• x 和 w 不可混用在同一 srcset 中
• 若同时需适配宽度和 DPR，优先用 w + sizes（更精准），x 更适合固定尺寸组件（如图标）

示例（适配 2x 屏）：

<img src="icon-1x.png"
     srcset="icon-1x.png 1x, icon-2x.png 2x"
     alt="导航图标">