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 影像
• 響應式圖片
• 影像檔案型別和格式指南