<img src="" width="" height="">
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / フォーム関連要素 / インタラクティブ・コンテンツ(usemap属性がある場合) / パルパブル・コンテンツ |
利用場所 | エンベッディッド・コンテンツが置ける場所 |
内容 | 無し(空要素) |
img要素に width=""
と height=""
を追加すると、画像の表示サイズを指定することができます。
<img src="example.gif" alt="サンプル" width="300" height="150">
属性 | 値 | ||
---|---|---|---|
必須属性 | |||
src="" |
画像の指定 | URL | 埋め込む画像ファイルのURL |
任意属性 | |||
width="" |
画像の幅 | 数値 | ピクセル数 |
height="" |
画像の高さ | 数値 | ピクセル数 |
この属性の値には、画像ファイルの横幅と高さをピクセル数で指定しておきます。
例えば、幅200ピクセル×高さ150ピクセルの画像を埋め込む場合は、そのサイズを次のように指定します。
<img src="sea.jpg" alt="青空と海の写真" width="200" height="150">
画像のサイズを指定しておくことで、予め画像を表示する領域が確保されることになり、レンダリング中のカクカクとした動き(画像が読み込まれるごとにレイアウトが動いてしまう現象)を抑えられるようになります。