このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

source”要素~“width”属性HTML Living Standardで定義

記事Jun. 2nd, 2022
画像の横幅を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

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>
表示サンプルはリンク先を参照新しいウィンドウで表示します
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク