Picturefill 2.xを使ったレスポンシブ・イメージのデモ

幅に合わせた寸法での表示（Viewport-based Selection）

sizes属性にメディアクエリを使用しない場合

<img
	sizes="100vw"
	srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
	alt="幅に合わせた寸法での表示の例">
			

sizes属性にメディアクエリを入れた場合

640px以上で2カラムに変わるレイアウトで画像を使用する場合のsizes属性の指定の例。640px未満はViewportの100%、640px以上ではViewportの50%、1140px以上では、1140px ÷ 2 = 570px以上で、一番近いサイズの画像で表示するように指定。

以下のサンプル1、サンプル2では、sizes属性に指定したメディアクエリの順番を逆にしてみた。すると、1140px以上で表示される画像が異なる。

サンプル1

サンプル2

サンプル1のソースコード

<img
	sizes="(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw"
	srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
	alt="幅に合わせた寸法での表示の例">
			

サンプル2のソースコード

<img
	sizes="(min-width: 640px) 50vw, (min-width: 1140px) 570px, 100vw"
	srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
	alt="幅に合わせた寸法での表示の例">