{{SeeCompatTable}}
サマリー
<picture>
要素は、特定の{{HTMLElement("img")}}を含めることができる複数の{{HTMLElement("source")}}を指定するためのコンテナです。ブラウザは、現在のページレイアウト(画像が表示されるボックスの制約)と(通常やhiDPIデバイスのような)表示のためのデバイスに応じて最適なsourceを選択します。
使用コンテキスト
- コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ
- 許可されたコンテンツ0個以上の{{HTMLElement("source")}} 要素とオプションとしてscript-supporting要素と混合された1つの{{HTMLElement("img")}} 要素
- タグの省略 {{no_tag_omission}}
- 許可された親要素埋め込みコンテンツを受け入れるすべての要素
- DOMインターフェイス {{domxref("HTMLPictureElement")}}
属性
この要素はグローバル属性のみを持ちます。
例1: media属性の使用
media属性でユーザーエージェントが {{HTMLElement("source")}}要素の選択をするためのメディアクエリを設定できます。メディアクエリがfalseと評価した場合、{{HTMLElement("source")}} 要素はスキップされます。
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
例2: type属性の使用
type属性は、{{HTMLElement("source")}} 要素のsrcset属性で与えられるリソースのMIMEタイプを指定します。ユーザーエージェントが与えられたtypeをサポートしてない場合、 {{HTMLElement("source")}} 要素はスキップされます。
<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture>
仕様
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}} | {{Spec2('HTML WHATWG')}} | Initial definition |
ブラウザ実装状況
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 38 | {{ CompatGeckoDesktop("33") }} behind the dom.image.picture.enabled preference (off by default) |
{{CompatNo}} | 25 | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Chrome 38 | {{ CompatGeckoMobile("33") }} behind the dom.image.picture.enabled preference (off by default) |
{{CompatNo}} | 25 | {{CompatNo}} |
関連項目
- {{HTMLElement("img")}}要素
{{HTMLRef}}