<IMG width="" height="">画像の表示サイズを変更

画像(<IMG>)の表示サイズを変更する時は、width属性とheight属性を使います。

画像のサイズはピクセル数で指定するか、ウィンドウに対する割合をパーセンテージ(%)で指定します。 またパーセントで指定した場合は、相対的なサイズとなり、ウィンドウのサイズに左右されます。 ブラウザによっては指定したサイズ通りに表示されないこともありますので注意して下さい。

なお画像の実際のサイズと異なるサイズを指定した場合は、拡大・縮小されて表示されます。

width属性とheight属性を指定しない場合は画像本来のサイズで表示されますが、指定しておくことで、画像以降の内容(テキストなど)を素早く表示させることができます。 ですので、画像本来のサイズから幅や高さを変えない場合でも、width属性とheight属性を記述しておいた方がいいでしょう。

使用した時の例

<img src="/image/sample.jpg" width="130" height="87" alt="サンプル(ピクセル数)" >
<img src="/image/sample.jpg" width="200" height="150" alt="サンプル(ピクセル数)" >
<img src="/image/sample.jpg" width="25%" height="20%" alt="サンプル(パーセント)" >

ブラウザ上の表示例

サンプル(ピクセル数) サンプル(ピクセル数) サンプル(パーセント)

書式

  • <img src="画像url" width="" height="高さ"> ・・・・・・ 画像のサイズを指定する

属性

width="" 画像の横幅を指定
height="" 画像の高さを指定

対応ブラウザなどのデータ

形式 <img src="" width="" height=""> 分類 インライン要素
開始タグ 必須 終了タグ なし
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~