HTMLLinkElement: imageSizes 属性

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

HTMLLinkElement 接口的 imageSizes 属性用于指明通过 imageSrcset 属性定义的预加载图片的尺寸和条件。它反映了 <link> 元素的 imagesizes 属性值。该属性可以检索或设置 imagesizes 属性的值。

<link> 元素的 imagesizes 属性与 <img> 元素的 sizes 属性相同：一个逗号分隔的源尺寸列表。每个源尺寸包含一个媒体条件、图片的尺寸（作为 <length>）或关键字 auto，后者必须放在最前面。有关 sizes 属性语法的更多信息，请参阅 <img>。

imagesrcset 和 imagesizes 属性仅与 rel 属性设置为 preload 且 as 属性设置为 image 的 <link> 元素相关。

值

一个由逗号分隔的源尺寸组成的字符串，如果未指定则为空字符串 ""。

示例

给定以下 <link> 元素

html

<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

…我们可以通过 imageSizes 属性检索和更新 imagesizes 属性值

const link = document.querySelector("link");
log(`Original: ${link.imageSizes}`);

// Change the value
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);

规范

规范
HTML # dom-link-imagesizes

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 1 日修改。

在 GitHub 上查看此页面 • 报告此内容的错误