CSS Academy · 课时

响应式图像与 Picture 元素

Q: 「响应式图像与 Picture 元素」这节课中我会学到什么？

使用 srcset、sizes 和 HTML picture 元素提供尺寸合适的图像。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 srcset、sizes 和 HTML picture 元素提供尺寸合适的图像。

第 4 / 4 课13 个步骤

响应式图像与 Picture 元素 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

响应式图像的挑战

在移动设备上下载完整分辨率的桌面图像会浪费带宽并延长加载时间。响应式图像会根据设备提供尺寸合适的图像。

max-width: 100% 基础规则

响应式图像的最基本规则：防止图像溢出容器，同时保持宽高比。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />

使用 srcset 提供不同分辨率

srcset 属性提供多个图像源。浏览器会根据设备像素比（DPR）选择最合适的图像：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
  alt="A beautiful landscape"
  style="max-width:100%;height:auto;display:block;"
>

使用宽度描述符设置 srcset

使用 w 描述符告诉浏览器每个图像文件的实际像素宽度：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
  alt="Hero image"
  style="max-width:100%;height:auto;display:block;"
>

sizes 属性

sizes 属性告诉浏览器图像在不同视口尺寸下显示的宽度，帮助浏览器从 srcset 中选择正确的图像源。

<img
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  alt="Product photo"
  style="max-width:100%;height:auto;display:block;"
>

picture 元素

<picture> 元素可以通过带有媒体条件的 <source> 元素，完全控制要提供的图像文件。浏览器会使用第一个匹配的图像源。

<picture>
  <source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
  <source media="(min-width: 600px)"  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>

使用 picture 实现艺术指导

艺术指导会针对不同屏幕尺寸提供不同的裁剪方式或构图，而不只是提供同一图像的较小版本。

<picture>
  <!-- Wide crop for desktop -->
  <source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
  <!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>

现代图像格式：WebP 和 AVIF

<picture> 元素支持选择图像格式。使用现代格式，并提供备用格式：

<picture>
  <source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>

使用 loading="lazy" 提升性能

loading="lazy" 属性会延迟加载屏幕外的图像，直到用户滚动到图像附近：

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
  loading="lazy"
  decoding="async"
  alt="Product"
  style="max-width:100%;height:auto;display:block;"
>

width 和 height 属性

始终为图像添加 width 和 height 属性。它们可以让浏览器在图像加载前预留布局空间，从而防止布局偏移（CLS）。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">

在容器中的图像使用 object-fit

当图像位于固定尺寸的容器中时，使用 object-fit 控制图像填充空间的方式：

<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />

快速检查

哪个 HTML 属性可以与 srcset 配合使用，告诉浏览器图像在不同视口尺寸下的显示宽度？

在交互式课程中回答

回顾

响应式图像使用 srcset 和 sizes 提供尺寸合适的图像。<picture> 元素支持艺术指导和格式选择。对于容器中的图像，始终使用 loading="lazy"、width/height 属性以及 object-fit。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「响应式图像与 Picture 元素」课时是免费的吗？

是的 — 「响应式图像与 Picture 元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「响应式图像与 Picture 元素」这节课中我会学到什么？

使用 srcset、sizes 和 HTML picture 元素提供尺寸合适的图像。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「响应式图像与 Picture 元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy