?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
這是一個實驗中的功能
由于該技術(shù)的規(guī)格不穩(wěn)定,請查看各種瀏覽器的兼容性表格以供使用。另外請注意,隨著規(guī)范的變化,實驗技術(shù)的語法和行為在未來版本的瀏覽器中可能會發(fā)生變化。
HTML<picture>
元素是一個容器,用來為其內(nèi)部特定的<img>
元素提供多樣的<source>
元素。瀏覽器會根據(jù)當(dāng)前頁面(即圖片所在的盒子的容器)的布局以及當(dāng)前瀏覽的設(shè)備(比如普通的屏幕和高清屏幕)去從中選擇最合適的資源。
內(nèi)容類別 | Flow content, phrasing content, embedded content |
---|---|
允許的內(nèi)容 | 零個或多個<source>元素,后跟一個<img>元素,可選地與腳本支持元素混合在一起。 |
標(biāo)記遺漏 | 沒有,起始和結(jié)束標(biāo)簽都是強制性的。 |
允許父級 | 任何允許嵌入內(nèi)容的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLPictureElement |
這個元素只包含全局屬性。
media
屬性media
屬性允許你提供一個用于給用戶代理作為選擇<source>
元素的依據(jù)的媒體查詢。如果這個媒體查詢匹配結(jié)果為false
,那么這個<source>
元素會被跳過。
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"></picture>
type
屬性type
屬性允許你為<source>
元素的 srcset 屬性指向的資源指定一個 MIME 類型。如果用戶代理不支持指定的類型,那么這個<source>
元素會被跳過。
<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"></picture>
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living StandardThe definition of '<picture>' in that specification. | Living Standard | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 38 | 13 | 38 (38) | No support | 25 | 9.1 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 38 | (Yes) | 38.0 (38) | No support | 25 | iOS 9.3 |