imgのwidth/heightによる画像サイズ変更

画像を表示するimgタグに名前をつけると、JavaScriptから「横幅」や「高さ」を制御できるようになります。たとえば、

<img name="testimg" src="imgscale.jpg" width="400" height="300">

として画像imgscale.jpgを表示すると、最初は400*300ピクセルで表示されますが、JavaScriptname属性testimgを指定し画像オブジェクトを参照することで、大きさを変更できるようになるわけです。画像を参照するときは、以下のようにdocument.nameとし、widthheightを変更します。

  document.testimg.width = 横幅;
  document.testimg.height = 高さ;

画像サイズ変更テスト

ボタンをクリックすると、画像の大きさが変わります。


なお、画像サイズの変更は画像が読み込み終わる前に行うとエラーになることがあるようなので、大きな画像や複数の画像を扱うときは、読み込みが終わるのを待つなどの対策が必要になるかもしれません。