<picture>〜</picture>
picture（ピクチャー）要素はレスポンシブ・イメージを実現するための要素になります。
picture 要素内に内包されたimg要素とsource要素にsrcset属性、media属性、sizes属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になる。
| picture要素 | 説明 |
|---|---|
| カテゴリー | ・エンベッディッドコンテンツ ・フレージングコンテンツ ・フローコンテンツ |
| コンテンツモデル | 0個または複数のsouce要素続いて続いて、1つのimg要素。 オプションでスクリプト支援要素（script要素及びtemplate要素）。 |
| 使用できる場所 | エンベッディッドコンテンツが期待される場所 |
picture要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
使用例
<picture>
<source srcset="https://./IMG_0911.webp 1.5x, https://./IMG_0911-2.webp 2x">
<img alt="福島県石川郡石川城跡" src="https://./IMG_0911-3.webp">
</picture>
表示
source mediaを指定した場合
使用例
<picture>
<source media="(min-width: 30em)" alt="福島県石川郡石川城址" srcset="https://./IMG_0911-2.webp" width="1224" height="1632">
<source media="(min-width: 50em)" alt="福島県石川郡石川城址" srcset="https://./IMG_0911-3.webp" width="1836" height="2448">
<img src="https://./IMG_0911-1.webp" alt="福島県石川郡石川城址" width="612" height="816">
</picture>表示
