HTML5

タグ（要素）

PICTURE

→● mdn

画像を表す。

0 個以上の SOURCE 要素と一つの IMG 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

この要素を使用できる文脈

エンベディッド内容が期待される場所。

内容モデル

0 個以上の SOURCE 要素、その後に来る 1 つの IMG 要素、任意でスクリプト サポート要素と混合される。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

解説

スクリーン ピクセル密度、ビュー ポート サイズ、画像フォーマット、およびその他の要素を元にした、著者に宣言的に制御を許可するために、または画像が使用するためのリソースに関するユーザー エージェントに対するヒントを与えるために、ソースの含まれた IMG 要素に複数のソースを提供するコンテナである。この要素は、要素の子を表す。

PICTURE 要素は、VIDEO および AUDIO 要素によく似た異なる何かである。それら要素のすべてが SOURCE 要素を含む一方で、SOURCE 要素の src 属性は、要素が PICTURE 要素内でネストされる場合に意味を持たず、リソース選択アルゴリズムは異なる。同様に、PICTURE 要素自身は何も表示しない。要素は複数の URL から選択する要素を有効にする要素の含まれる IMG 要素にコンテキストを単に提供する。

例

<PICTURE>
  <SOURCE srcset="/media/cc0-images/surfer-240-200.jpg"
    media="(min-width: 800px)">
  <IMG src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</PICTURE>

<IMG src="../Sample/Picture.jpg"><BR>
<IMG src="../Sample/Picture_M.jpg">

<PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg" media="(min-width:300px)">
  <IMG src="../Sample/Picture_M.jpg">
</PICTURE>

<PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg" media="(min-width:2000px)">
  <IMG src="../Sample/Picture_M.jpg">
</PICTURE>

テスト