“source”要素~“width”属性

“width”属性について

“width”属性は画像の横幅を指定する属性です。

値はCSSピクセル数を単位のない正の整数で指定します。

画像ファイルの本来の大きさで描画したい場合は“width”属性と“height”属性を指定しなくてもそのままの大きさで描画されますが、画像の大きさを指定しておくことで読み込みの途中で描画域の大きさが変わって文書の読み込み時にレイアウトが崩れるのを防ぐことができます。

“media”属性は親要素が“picture”要素である場合に指定できます。

“media”属性は親要素が“audio”要素もしくは“video”要素の時は無視されます。

指定できる値

サンプルコード

<p>

<picture>

<source width="320" height="320" media="(max-width: 320px)" srcset="sample-320-sp.png">
<source width="640" height="320" media="(max-width: 640px)" srcset="sample-640.png">
<source width="1280" height="640" media="(min-width: 640px)" srcset="sample-1280.png">
<img src="sample-640.png" alt="サンプルの写真">

</picture>

</p>

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