<picture>: The Picture element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
HTML <picture>
元素 包含了零或零以上個 <source>
元素以及一個 <img>
元素,以為不同顯示器/裝置提供同張圖片的不同版本。
瀏覽器將會考慮每個 <source>
元素,並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <picture>
元素——則 <img>
屬性的 URL 會被選擇。被選擇的圖片將會在 <img>
元素存在的位置顯示。
嘗試一下
為了決定載入哪一個 URL,user agent 會檢視每一個 <source>
的 srcset
、media
以及 type
屬性,以選出最適合當前版面以及顯示裝置支援度的圖片。
<img>
有兩個作用:
- 它描述了該圖片的尺寸等屬性以及呈現(presentation)。
- 在所有列出的
<source>
都不能提供可用圖片的情況下的 fallback。
<picture>
的常見使用案例:
- 圖像方向(art direction): 根據不同的
media
狀況裁切或調整圖片(例如在較小的螢幕上,載入原本有複雜細節圖片的較簡單版本圖片) - **提供替代的圖片格式:**以應對某些特定格式不被支援的情況
- **節省頻寬並加速頁面載入速度:**透過針對觀看者的裝置載入最適當的圖片做到這點
如果是要為高 DPI (Retina)螢幕提供圖片的高解析度版本時,可改在使用 <img>
上使用 srcset
屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本,這樣你就不用特地指定 media
條件。
Content categories | Flow content, phrasing content, embedded content |
---|---|
Permitted content | Zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements. |
標籤省略 | 不允許,開始和結束標籤都是必須的。 |
Permitted parents | Any element that allows embedded content. |
Implicit ARIA role | No corresponding role |
Permitted ARIA roles | No role permitted |
DOM interface | HTMLPictureElement |
屬性
此元素只包含 global attributes.
用法筆記
你可以使用 object-position
屬性來在元素的 frame 內調整圖片位置,也可以用 object-fit
屬性控制圖片在 frame 內如何調整大小。
備註:在子元素 <img>
上使用這些屬性,而不是 <picture>
元素.
範例
以下例子示範如何根據 <source>
元素不同的屬性設定選擇 <picture>
中的不同圖片。
media 屬性
srcset 屬性
srcset
屬性用來提供根據大小區分的可能圖片清單。
它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成(擇一):
-
寬度,結尾為
w
(例如300w
); 或是 - 像素密度,結尾為
x
(例如2x
),以為高 DPI 螢幕提供高解析度圖片
<picture>
<source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" />
<source srcset="logo-480.png, logo-480-2x.png 2x" />
<img src="logo-320.png" alt="logo" />
</picture>
type 屬性
規格
Specification |
---|
HTML Standard # the-picture-element |
瀏覽器支援度
BCD tables only load in the browser
相關資源
<img>
元素<source>
元素- 在圖片的 frame 中調整其大小與位置:
object-position
andobject-fit
- 圖片檔案類型與格式指南