固定枠内への最大画像の貼り付け

質問

HTMLで作成された固定枠内に、CGIを使用して複数の画像データを、
1枚ずつ表示させるのですが、現在の状態では画像データの大きさによってレイアウが不均一になってしまいます。
そこで、JavaScriptを利用して、元画像の縦横比を保ったまま、
任意の大きさの枠の中で、画像データの大きい方の長さが枠内いっぱいになるように表示したいのです。
つまり、
縦横比のそれぞれ違った、フレームと画像があり、
その画像を、フレームの中心部から拡大して行ったとき、
縦横いずれか先にフレームに接する大きさのところまで拡大表示される
大きさで表示させたいのですが。
下記のスクリプトでは、縦横共通の最大値しか指定できません。
縦横それぞれに最大値を指定できるようにし、
上記の様に表示させるには、
どの様な記述方があるでしょうか。
ご教授、宜しくお願いします。

（スクリプト要素）
size = 120 ;
function resize(id) {
if (document.images[id].width > document.images[id].height) document.images[id].width = size ;
else document.images[id].height = size ;
}
（BODY要素）
<img src="hoge.jpg" id="sample1" onLoad="resize('sample1')" />

回答No.1

fujillin · ベストアンサー

固定枠の指定がどのようになされているのか不明ですが、とりあえず直接指定しちゃうとしてこんな感じ？　（変数sizeが固定枠のサイズ）

＜script＞
function resize(e) {
var size = { width:300, height:200 };
var w = size.width / e.width;
var h = size.height / e.height;
if (w > h) w = h;
e.width *= w;
}

＜HTML＞
<img src="hoge.jpg" onload="resize(this)">

お礼

fujillin様

ご回答、有難うございました。
早速、示して頂いたScriptを書き込んだところ、
希望通りの画像表示を実現できました。

有難うございました！