【メモ】 画像の縦横比を維持したまま、画像サイズを一定の範囲内に縮小

縦横共に300px以内でかつ縦横比を維持したまま画像を縮小したかったので簡単なJavaScriptを書いてみた。

画面内の画像全てに適用するとするとこんな感じ。

var maxWidth  = 300;
var maxHeight = 300;
var elements = document.getElementsByTagName("img");
for(i=0;i height) {
elements[i].width = Math.min(width, maxWidth);
} else {
elements[i].height = Math.min(height, maxHeight);
}
}

まぁはっきり言うと、「縦横比の維持」は基本的にブラウザ任せですね。
片方だけ指定すればもう片方は自動で計算される…というのは仕様的にどうなのだろう。



なお、幅だけを一定以内に収めたければこれをimgタグに置くだけで良いのだけど、

onload="this.width = Math.min(this.width, 300)";

縦長の画像（例えば縦1,000px/横100px）の場合に逆に拡大されてしまってはみ出る。
それを回避するためには、縦か横かどっちかデカイ方に対して適用すればOKと。


なんか処理を共通化する良い方法がありそうな気がするけど…まぁいいか。とりあえず。