?
This document uses PHP Chinese website manual Release
這是一個(gè)實(shí)驗(yàn)中的功能
由于該技術(shù)的規(guī)格不穩(wěn)定,請查看各種瀏覽器的兼容性表格以供使用。另外請注意,隨著規(guī)范的變化,實(shí)驗(yàn)技術(shù)的語法和行為在未來版本的瀏覽器中可能會(huì)發(fā)生變化。
HTML<picture>
元素是一個(gè)容器,用來為其內(nèi)部特定的<img>
元素提供多樣的<source>
元素。瀏覽器會(huì)根據(jù)當(dāng)前頁面(即圖片所在的盒子的容器)的布局以及當(dāng)前瀏覽的設(shè)備(比如普通的屏幕和高清屏幕)去從中選擇最合適的資源。
內(nèi)容類別 | Flow content, phrasing content, embedded content |
---|---|
允許的內(nèi)容 | 零個(gè)或多個(gè)<source>元素,后跟一個(gè)<img>元素,可選地與腳本支持元素混合在一起。 |
標(biāo)記遺漏 | 沒有,起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父級(jí) | 任何允許嵌入內(nèi)容的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLPictureElement |
這個(gè)元素只包含全局屬性。
media
屬性media
屬性允許你提供一個(gè)用于給用戶代理作為選擇<source>
元素的依據(jù)的媒體查詢。如果這個(gè)媒體查詢匹配結(jié)果為false
,那么這個(gè)<source>
元素會(huì)被跳過。
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"></picture>
type
屬性type
屬性允許你為<source>
元素的 srcset 屬性指向的資源指定一個(gè) MIME 類型。如果用戶代理不支持指定的類型,那么這個(gè)<source>
元素會(huì)被跳過。
<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 |