備忘録的プログラミングリファレンス

<picture>エレメント

 <picture>エレメントは、<img>エレメントだけよりも柔軟にイメージリソースを定義できます。

 例えばデバイスによっては画面の解像度や大きさが違いますが、その違いによって画像リソースを替えることや変化させることができます。

 <picture>エレメントには、<source>エレメントと<img>エレメントが必要です。
 <source>エレメントで条件ごとの画像リソースを指定できます。ブラウザは<source>エレメントの属性値から、最適な画像をロードします。
 <img>エレメントは最後に定義します。もしも<picture>エレメントに未対応なブラウザや<source>エレメントにマッチしない場合は最後の<img>エレメントが適応されます。

 <source>エレメントによって条件を与えらるなど、<picture>エレメントは<video>、<audio>エレメントに似ています。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。

動作の確認