HTML <画像>タグ
例
<picture>タグの使用方法：
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
定義と使用法
この<picture>タグにより、Web開発者は画像リソースをより柔軟に指定できます。
この要素の最も一般的な用途は、<picture>レスポンシブデザインのアートディレクションです。ビューポートの幅に基づいて1つの画像を拡大または縮小する代わりに、ブラウザのビューポートをより適切に塗りつぶすように複数の画像を設計できます。
要素には2つの<picture>タグが含まれています。1つ以上の
<source>タグと1つの<img>タグです。
ブラウザは、メディアクエリが現在のビューポート幅と一致する最初の<source>要素を探し、適切な画像（srcset属性で指定）を表示します。<img>要素は、<picture>要素の最後の子として、どのソースタグも一致しない場合のフォールバックオプションとして必要です。
ヒント：この<picture>要素は、<video>および<audio>と「同様に」機能します。さまざまなソースを設定し、設定に適合する最初のソースが使用されているソースです。
ブラウザのサポート
表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
グローバル属性
この<picture>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<picture>タグは、HTMLのイベント属性もサポートしています。
関連ページ
HTMLチュートリアル：HTML <picture>要素
CSSチュートリアル：CSSレスポンシブデザイン-画像