JavaScriptを使えば、画像の現在の表示サイズに関係なく、画像オリジナルの(元々の)サイズを取得できる

ウェブ上に掲載する画像の大きさは、HTMLでもCSSでもJavaScriptでも自由に指定できるため、画像オリジナルの(元々の)大きさを無視したサイズで表示されている場合も多々あります。
HTMLでimg要素にwidth属性もheight属性も付加しない状態で表示すれば、画像はオリジナルの大きさで表示されます。しかし、CSSでサイズが調整されていれば別です。
なので、ウェブ上の表示を見ただけでは、その画像オリジナルの大きさは分かりません。
しかし、実はJavaScriptを使えば、その画像がどんな大きさで表示されていようとも、オリジナルの大きさを調べる(得る)ことはできます。

画像オリジナルの(本来の)横幅・高さを得る方法(現在の表示サイズではなく)

現在表示されているサイズではなく、その画像オリジナルの(本来の)サイズを得るには、naturalWidthプロパティやnaturalHeightプロパティを使います。例えば以下のように記述します。

var OrgWidth = document.getElementById('sampleImage').naturalWidth;
var OrgHeight = document.getElementById('sampleImage').naturalHeight;


このように記述すると、id="sampleImage"を指定したimg要素で読み込んでいる画像に関して、

• 変数OrgWidthには、その画像オリジナルの横幅が格納され、
• 変数OrgHeightには、その画像オリジナルの高さが格納されます。

※これらのプロパティは、Internet ExplorerではIE9以降のみで使えます。それ以外の代表的なブラウザでは昔から使えます。

画像オリジナルの(本来の)サイズを基準にして、キリの良い倍率で画像を綺麗に拡大・縮小させる例

画像の表示サイズをJavaScript変更するには、Imageオブジェクトのwidthプロパティやheightプロパティに値を入れるだけで済みます。(現在の表示サイズを知りたい場合にも、このwidthプロパティやheightプロパティを参照すれば分かります。)
ただ、できるだけ綺麗に拡大・縮小させたいなら、画像の本来のサイズを基準にして、50％・25％などの「切りの良い割合」で変化させた方が良いかも知れません。
そんなときには、naturalWidthプロパティやnaturalHeightプロパティを使って「画像のオリジナルの幅・高さ」の値を調べてから、その値を元に画像の表示サイズを指定割合で変化させると良いでしょう。

以下は、表示中の画像を「画像オリジナルの大きさ」を基準にして様々な倍率で変化させるサンプルです。

※上記に掲載している画像の本来のサイズは 300×200(px) ですが、初期状態ではHTMLによって、200×133(px)のサイズで表示されています。

画像を、オリジナルの(本来の)サイズで表示させるスクリプト

ある画像の表示サイズを、画像本来のサイズに変更するには、例えば以下のように記述します。

var resizeImg = document.getElementById("targetImage");
resizeImg.width  = resizeImg.naturalWidth;
resizeImg.height = resizeImg.naturalHeight;

上記では、「targetImage」というid名が割り振られた画像に対して、本来の横幅(naturalWidthプロパティ)と本来の高さ(naturalHeightプロパティ)を得て、それを現在の表示サイズ(width・height両プロパティ)に代入しています。
これによって、画像の表示サイズが、その画像本来のサイズに変わります。

オリジナルの(本来の)サイズを基準にして、画像を指定倍に拡大・縮小する関数

冒頭の例のように、画像のオリジナルの(本来の)サイズを基準にして、指定の倍率で変化させるには、以下のように記述します。
ここでは、ボタンクリックで何度でも利用できるよう、resizeImagePercentという関数を作っています。

function resizeImagePercent( resizeRate ) {
   var resizeImg = document.getElementById("targetImage");
   resizeImg.width  = resizeImg.naturalWidth  * resizeRate;
   resizeImg.height = resizeImg.naturalHeight * resizeRate;
}

この関数は、引数に「表示割合」を指定して使います。
この関数内では、「targetImage」というid名が割り振られた画像を画像オブジェクトにして、

• 本来の横幅(naturalWidthプロパティ)に指定割合(resizeRate)を掛けた値を、横幅(widthプロパティ)に代入
• 本来の高さ(naturalHeightプロパティ)に指定割合(resizeRate)を掛けた値を、高さ(heightプロパティ)に代入

……しています。
このresizeImagePercent関数は、以下のようにして使います。

resizeImagePercent( 表示割合 );

例えば、画像を(本来のサイズの)25％に縮小したい場合は、以下のように記述します。

resizeImagePercent( 0.25 );

画像を(本来のサイズの)200％(＝2倍)に拡大したい場合は、以下のように記述します。

resizeImagePercent( 2 );

というわけで、画像オリジナルの(本来の)サイズを取得するには、naturalWidthプロパティとnaturalHeightプロパティを使えば良い、という話でした。

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