HTMLImageElement: srcset 属性

值

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

每个图像候选字符串必须以引用非交互式图形资源的有效 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

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

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

CSS

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;
}

JavaScript

以下代码使用图像的 currentSrc 属性来获取并显示浏览器从 srcset 中选择的 URL。

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 图像
• 响应式图片
• 图像文件类型和格式指南