HTMLImageElement：srcset 属性

包含一个或多个图像候选字符串的逗号分隔列表的字符串，这些字符串在确定要呈现的图像资源时使用。 <img> 元素由 HTMLImageElement 表示。

每个图像候选字符串必须以一个有效的 URL 开头，该 URL 引用一个非交互式图形资源。然后是空格，然后是一个条件描述符，指示在哪些情况下应该使用该图像。除分隔 URL 和相应条件描述符的空格之外，空格字符将被忽略；这包括前导和尾随空格，以及逗号前后出现的空格。

条件描述符可以采用两种形式之一

• 要指示在以特定像素宽度渲染图像时应该使用图像候选字符串指定的图像资源，请提供一个宽度描述符，该描述符包含一个以像素为单位的宽度，后面是字母 "w"。例如，要提供一个在渲染器需要 450 像素宽的图像时使用的图像资源，请使用宽度描述符字符串 450w。指定的宽度必须是正的、非零的整数，并且必须与引用的图像的内在宽度匹配。当 srcset 包含 "w" 描述符时，浏览器将使用这些描述符以及 sizes 属性来选择一个资源。
• 或者，您可以使用像素密度描述符，该描述符指定了在哪些情况下应该使用相应的图像资源作为显示器的像素密度。这是通过将像素密度表示为一个正的、非零的浮点值，后面加上小写字母 "x" 来实现的。例如，要说明当像素密度是标准密度的两倍时应该使用相应的图像，您可以给出像素密度描述符 2x 或 2.0x。

如果未提供条件描述符（换句话说，图像候选只提供一个 URL），则该候选将被分配一个默认描述符 "1x"。

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"

此字符串提供了图像的版本，这些版本将在标准像素密度（未描述，分配默认值为 1x）和双倍像素密度 (2x) 时使用。

当图像元素的 srcset 包含 "x" 描述符时，浏览器还会将 src 属性中的 URL（如果存在）视为候选，并将其分配一个默认描述符 1x。

"header640.png 640w, header960.png 960w, header1024.png 1024w"

此字符串提供了标题图像的版本，这些版本在 用户代理的 渲染器需要宽度为 640px、960px 或 1024px 的图像时使用。

请注意，如果 srcset 中的任何资源都用 "w" 描述符描述，则该 srcset 中的所有资源也必须用 "w" 描述符描述，并且图像元素的 src 不会被视为候选。

以下 HTML 指示默认图像资源（包含在 src 属性中）应在 1x 显示器上使用，而 400 像素版本（包含在 srcset 中，并分配了 2x 描述符）应在 2x 显示器上使用。

<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
    alt="Clock"
    srcset="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 2x" />
</div>

CSS 指定图像及其周围的框应为 200 像素正方形，并且应具有一个简单的边框。还提供了 word-break 属性，使用 break-all 值告诉浏览器无论字符串中的哪个位置，只要在可用宽度内就换行。

.box {
  width: 200px;
  border: 2px solid rgb(150 150 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}

以下代码在 window 的 load 事件的处理程序中运行。它使用图像的 currentSrc 属性来获取和显示浏览器从 srcset 中选择的 URL。

window.addEventListener("load", () => {
  const box = document.querySelector(".box");
  const image = box.querySelector("img");

  const newElem = document.createElement("p");
  newElem.textContent = "Image: ";
  newElem.appendChild(document.createElement("code")).textContent =
    image.currentSrc;
  box.appendChild(newElem);
});

在下面显示的输出中，选定的 URL 将对应于您的显示结果是否选择图像的 1x 或 2x 版本。如果您碰巧同时拥有标准和高密度显示器，请尝试将此窗口在它们之间移动并重新加载页面以查看结果的变化。

有关更多示例，请参阅我们有关 响应式图像 的指南。

• HTML 中的图像
• 响应式图像
• 图像文件类型和格式指南