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

<picture> エレメント

 <picture> エレメントは、<img> エレメントだけよりも柔軟にイメージリソースを定義できます。
 <picture>エレメントによって、レスポンシブに対応した画像表示が可能になります。

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

<picture> エレメント
<picture>
	<source srcset="example1500.jpg" media="(min-width: 1500px)" />
	<source srcset="example1200.jpg" media="(min-width: 1200px)" />
	<img src="example760.jpg" alt="example image" />
</picture>

 <picture>エレメントには、<source> エレメントと <img> エレメントが必要です。

 <source> エレメントでmedia属性による条件ごとの画像リソースを指定できます。 ブラウザは <source> エレメントのmedia属性値から、最適な画像をロードします。

 <img> エレメントは最後に定義します。 もしも<picture>エレメントに未対応なブラウザや <source> エレメントにマッチしない場合は最後の<img> エレメントが適応されます。
 ここでは、大きい画像が可能化を評価する順で、最後に最も小さい画像になるという評価をしています。

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

属性

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

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

動作の確認