picture要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

0個以上のsource要素
上記に続いて、1個だけのimg要素。必須。

上記に、0個以上のScript-supporting contentの混在も可。

属性

グローバル属性

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

すべてのroleは指定不可。
aria-hidden属性を除くすべてのaria-*属性は指定不可。

意味・用法: 画面ピクセル密度、ビューポートサイズ、画像の形式、及びその他の要因を基礎として、画像を制御することを著者に許すために、又は利用するための画像のリソースに関してユーザーエージェントにヒントを与えるために、img要素を含む複数のリソースを提供するコンテナである。

私見・補足

子要素はレスポンシブイメージに利用される画像のリソースの集まりである。

未対応ブラウザでは、子要素のimg要素が表示されるだけ。

表示確認

ソース


  <figure>
  <figcaption>picture要素サンプル（表示画面幅500pxを境に可変）</figcaption>
  <picture>
    <source media="(min-width:500px)" srcset="./sample/picture-min500px.gif" />
    <source media="(max-width:500px)" srcset="./sample/picture-max500px.gif" />
    <img src="./sample/picture-nosupport.gif" alt="picture要素未対応ブラウザで表示される画像" />
  </picture>
  </figure>

表示結果

picture要素未対応ブラウザで表示される画像 — picture要素サンプル（表示画面幅500pxを境に可変）