Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

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

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

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

……で済みます。

※ちなみに、画像の本来の(オリジナルの)サイズを知りたいなら、naturalWidthプロパティやnaturalHeightプロパティを使います。それらに関しては、「画像のオリジナルサイズを基準にして表示サイズを変更する」でも解説しましたので、そちらをどうぞ。

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

というわけで、以下は、縦横比を維持して画像をリサイズするサンプルと、縦横比を無視して画像をリサイズするサンプルの2種類を紹介します。
あ、その前に、画像の表示サイズを得てアラートに表示させる方法も紹介しておきます。

画像の表示サイズを得る方法

ウェブページ上に掲載されている画像の、現在表示されているサイズを調べるには、横幅は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);

このように記述すると、画像の表示サイズがアラートとして表示されます。表示例は以下の通りです。

草原のサンプル写真

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

さて、画像の縦横比を無視してリサイズするのは簡単です。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を実際に表示すると以下のようになります。

草原のサンプル写真

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

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

さて、画像の縦横比を維持した状態でリサイズするには、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行目では、「元の高さ」×(「今の横幅」÷「元の横幅」)を計算しています。これで、横幅の変化と同じ割合の変化を高さにも加えられます。
これで、縦横比を維持したままリサイズされるわけです。
実際に表示すると以下のようになります。

草原のサンプル写真

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

<script type="text/javascript">
// 横幅を指定すると、縦横比が維持されるように高さも自動計算して、画像をリサイズする
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);
}
</script>

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

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど