画像の大きさを指定エリアの大きさにフィットさせる方法

指定した表示域におさまるように画像を表示し、
画像の大きさが表示域に収まらない場合に
自動縮小するロジックです。

HTML5のCanvasを使うようになってから
よく使うようになったので流れをひかえておきます。
先にコードです。

// パラメータ
width 画像の幅
height 画像の高さ
opts.width 表示域の幅
opts.height 表示域の高さ
reduction_ratio 縮小率

if(width > height){
    if(width > opts.width){
        var reduction_ratio = opts.width/width;
        width = opts.witdh;
        height = height*reduction_ratio;
    }
}else if(height > width){
    if(height > opts.height){
        var reduction_ratio = opts.height/height;
        height = opts.height;
        width = width*reduction_ratio;
    }
}

[コード解説]
(1) 画像の幅と高さを比較して、長いほうを基準に縮小率を求める
なるべく大きく表示するため。元の画像の幅・高さを比較し、
長いほうで処理を進めます。

(2) 縮小率を求めて、もう一方の長さを調整する
画像の大きさ(たとえば幅)が表示域の幅を超えていたら、
「表示域の幅/画像の幅」で「縮小率」を計算します。
表示域の幅を画像の幅とし、
計算して得た「縮小率」を画像の高さにかけて
表示用の高さの値を得ます。

他にもいろいろやり方があると思います。
コメントをいただけましたら幸いです。