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 上檢視此頁面 • 報告此內容的錯誤