画像の縦横比を維持または無視してリサイズする方法

JavaScriptを使って画像の表示サイズ(横幅や高さ)を調べたり、画像の表示サイズを再設定(＝リサイズ)するには、Imageオブジェクトのwidthプロパティやheightプロパティを使います。
例えば、

• 現在の表示サイズを知りたければ、widthプロパティやheightプロパティの値を取得するだけです。
• 画像の表示サイズを変更したければ、widthプロパティやheightプロパティに値を代入するだけです。

画像の表示サイズを変更したい場合、たいていは縦横比を維持したまま変更したいんじゃないかと思います。写真の場合は特にそうですよね。とはいえ、フレーム(枠)を作る画像だとか装飾用の画像だとか、画像によっては縦横比を無視してサイズ変更したい場合もあるでしょう。
というわけで以下に、画像の縦横比を無視してリサイズする方法と、画像の縦横比を維持した状態でリサイズする方法の2種類を紹介します。

あ、その前にまずは、画像の表示サイズを取得(してアラートボックスに表示)する方法も参考までに紹介しておきます。

備考：画像の表示サイズをJavaScriptで得る方法

ウェブページ上に掲載されている画像の「現在表示されているサイズ」を調べるには、横幅はwidthプロパティを、高さはheightプロパティを参照するだけで済みます。
例えば、以下のようなHTMLで画像が表示されている場合、

<img src="samplephoto.jpg" alt="Sample Photo" id="sampleImage">

この画像の表示サイズ(横幅と高さ)を得るには、以下のような感じで記述すれば良いでしょう。

var targetImg = document.getElementById('sampleImage');
var targetWidth  = targetImg.width;
var targetHeight = targetImg.height;
var Msg = "画像の表示サイズは、横 " + targetWidth + " ×縦 " + targetHeight + " です。";
alert(Msg);

上記のJavaScriptソースでは、

1. まずgetElementByIdメソッドで指定idの要素を得て(1行目)、
2. そのwidthプロパティの値を得て(2行目)、
3. さらにheightプロパティの値も得て(3行目)、
4. それらを合体させて文字列を作成し(4行目)、
5. アラートボックスに表示(5行目)しているだけです。

このように記述したJavaScriptを、ボタンクリックで実行されるように書けば、下記の表示例のように「画像の表示サイズ」がアラートボックスに表示されます。

ボタンを押すと、「画像の表示サイズは、横 150 ×縦 100 です。」のように表示されるでしょう。

なお、ここで取得できるサイズは「画像本来の大きさ」ではなく、「今表示されているサイズ」です。もし、表示サイズに関係なく本来のサイズが知りたい場合は、別途「画像本来の大きさ(オリジナルサイズ)を取得して、指定倍率で画像サイズを変更する方法」で解説しましたのでそちらをご参照下さい。

画像の縦横比を無視してリサイズする方法

さて、画像の縦横比を無視してリサイズするのは簡単です。widthプロパティとheightプロパティに、何でも好きな値を代入すれば良いだけですから。例えば以下のように記述できます。

(A) 横幅だけを指定するなら：

document.getElementById('sampleImage').width = 400;

(B) 高さだけを指定するなら：

document.getElementById('sampleImage').height = 300;

(C) 横幅も高さも指定するなら：

var targetImg = document.getElementById('sampleImage');
targetImg.width = 600;
targetImg.height = 200;


上記のA～Cを実際に表示すると以下のようになります。

まあ、簡単ですよね。(^_^;)

※なお、CSSを使って画像のサイズを指定している場合は、上記のソースでは画像サイズが変化しない場合があります。HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるからです。その場合は、JavaScriptを使ってwidthプロパティやheightプロパティを変更するのではなく、style.widthプロパティやstyle.heightプロパティを使って変化させます。ただし、その場合は単位の付加が必要です。詳しくは末尾で紹介します。

画像の縦横比を維持した状態でリサイズする方法

さて、画像の縦横比を維持した状態でリサイズするには、widthプロパティかheightプロパティのどちらかにだけ値を入れた後、もう片方を同じ割合だけ変化させてやれば良いわけです。
例えば、横幅だけを指定して、高さを自動で変化させるには、以下のように書けるでしょう。

var targetImg = document.getElementById('sampleImage');
var orgWidth  = targetImg.width;  // 元の横幅を保存
var orgHeight = targetImg.height; // 元の高さを保存
targetImg.width = 400;  // 横幅を400pxにリサイズ
targetImg.height = orgHeight * (targetImg.width / orgWidth); // 高さを横幅の変化割合に合わせる

最後の5行目に記述した orgHeight * (targetImg.width / orgWidth) では、[元の高さ]×([今の横幅]÷[元の横幅]) を計算しています。これで、横幅の変化と同じ割合の変化を高さにも加えられます。
これで、縦横比を維持したままリサイズされるわけです。
実際に表示すると以下のようになります。

縦横比を維持した状態でリサイズされます。
ちなみに、上記のサンプルでは、以下のようなresizeByWidthという関数を作成して、ボタンクリックで呼び出しています。

// 横幅を指定すると、縦横比が維持されるように高さも自動計算して、画像をリサイズする
function resizeByWidth( newsize ) {
   var targetImg = document.getElementById('SampleImage');
   var orgWidth  = targetImg.width;
   var orgHeight = targetImg.height;
   targetImg.width = newsize;
   targetImg.height = orgHeight * (targetImg.width / orgWidth);
}

引数に「望みの横幅」の値を指定することで、どんなサイズにも変更できます。
ボタンは、以下のようなHTMLで作っています。

<input type="button" value="横幅を200pxにする" onclick="resizeByWidth(200);">
<input type="button" value="横幅を300pxにする" onclick="resizeByWidth(300);">


※なお、CSSを使って画像のサイズを指定している場合は、上記のソースでは画像サイズが変化しない場合があります。HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるからです。その場合は、JavaScriptを使ってwidthプロパティやheightプロパティを変更するのではなく、style.widthプロパティやstyle.heightプロパティを使って変化させます。ただし、その場合は単位の付加が必要です。詳しくは末尾で紹介します。

CSSで画像サイズが指定されている場合に、JavaScriptでリサイズしたい際に必要な書き方

画像サイズは、HTMLではなくCSSで指定している場合もありますよね。

▼HTMLでサイズを指定
<img src="sample.jpg" width="200" height="150" alt="画像例" id="sampleImage">

▼CSSでサイズを指定
<img src="sample.jpg" style="width:200px; height:150px;" alt="画像例" id="sampleImage">

HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるため、CSSで画像サイズが指定されている状況では、JavaScriptでwidthプロパティやheightプロパティを変更しても表示に反映されません。
その際は、widthプロパティやheightプロパティではなく、スタイルシート側の指定であるstyle.widthプロパティやstyle.heightプロパティに値を代入しましょう。

※特に最近はレスポンシブ・ウェブデザインの採用によって、画像にはheight: auto;のように(画像の横幅を変化させた際に)強制的に縦横比を維持するようなCSSを使っている場合もありますから、JavaScriptでheightプロパティの値を変化させても指定が効かないケースも多々ありそうな気がします。(実は今ご覧になっているこのページでもそうです。^^;)

style.widthプロパティやstyle.heightプロパティに値を代入する場合には、単位の付加が必須！

ただし、style.widthプロパティやstyle.heightプロパティに値を代入する場合には、数値だけを代入しても意味がありません。CSSの値なので数値に単位を付加して代入しなければなりません。
例えば、以下のようにJavaScriptを記述します。

var targetImg = document.getElementById('sampleImage');
targetImg.style.width = "600px";
targetImg.style.height = "250px";


上記のように、600pxや250pxのように単位「px」を加えた文字列を代入します。
以下のように数値だけを代入しても表示サイズは変わりません。

var targetImg = document.getElementById('sampleImage');
targetImg.style.width = 600; // 意味がない！
targetImg.style.height = 250; // 意味がない！


ついうっかりこう書いてしまいがちなので注意しましょう。

なお、設定するサイズに変数を使いたい場合は、下記のように + "px"のような感じの文字列を加えて、数値に単位を付加してから代入します。

var targetImg = document.getElementById('sampleImage');
var resizeWidth = 600;
targetImg.style.width = resizeWidth + "px";

このように単位を付加すれば、CSS側で指定された画像サイズをJavaScriptで上書きできます。
使う単位は「px」である必要はありませんから、CSSで有効な単位なら何でも付加できます。

というわけで、縦横比を維持した状態で画像をリサイズする方法の紹介でした。

なお、JavaScriptではなくCSSで画像をリサイズする方法は、CSS Tipsコーナーの「画像の縦横比を維持したままリサイズ(拡大/縮小)する方法」で解説していますので、よろしければそちらもご参照下さい。

(更新日：2017年06月14日)