“img”要素~“sizes”属性

“sizes”属性について

“sizes”属性は“srcset”属性を指定して埋め込まれた画像の表示サイズを指定します。

“sizes”属性は画像の横幅の表示サイズを指定します。横幅の長さはCSSで定義されている長さの単位を使用します。“calc()”関数が使用できますが、“%”値は使用できません。

“sizes”属性はメディアクエリを使用してその条件ごとの画像の表示サイズを指定することができます。この場合空白文字を挟んだメディアクエリとその条件の時の画像の表示サイズのセットをカンマ(“,”)で区切って必要な数だけ記述します。ただし、一番最後に記述する画像の表示サイズはメディアクエリを省略しなければなりません。複数の条件に当てはまる場合は先に記述されたものが優先されます。

“sizes”属性は“srcset”属性を幅記述子を使用して指定した場合は指定しなければなりません。それ以外の場合“sizes”属性は無視されます。

指定できる値

サンプルコード

画像の表示サイズを指定
<img srcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" sizes="50vw" sample-640.png" alt="サンプル画像">


表示サンプルはリンク先を参照

条件ごとの画像の表示サイズを指定
<img srcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" sizes="(max-width: 640px) 190px, 50vw" sample-640.png" alt="サンプル画像">


表示サンプルはリンク先を参照