JavaScriptでウィンドウサイズに合わせて画像サイズを変更

IT 勉強 JavaScript

人力検索はてなの質問(http://www.hatena.ne.jp/1140032618)の回答が現時点(2006/02/17 00:45)で1件開かれています。そこで示されているサンプルで、およそ希望していることは出来そうな雰囲気なのですが、個人的に引っかかる部分があったので試行錯誤しながらJavaScriptを書いてみました。何が気になったのかと言うと、リサイズの仕方です。縦横比を維持せずにリサイズするのがどうも生理的にダメなのです。そこで、画像の縦と横のどちらが画面に収まらないのかをチェックし、縦横比を(ほぼ)維持したまま画像をリサイズするJavaScriptにしてみました。IE6.0とFirefox1.5で稼動確認いたしました。もちろん画面表示上のサイズを小さくするだけですので、画像のファイルサイズは一切変わりません。本来、ウィンドウサイズをあらかじめ考慮しておき、そのサイズにふさわしいサムネイル画像を用意するべきですよね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ウィンドウサイズに合わせて画像サイズを変更</title>
<script type="text/javascript">
<!--
function imgResize(){
	resizeRate = 1.0; // 画面サイズに対する画像サイズの比率
	margin = 12; // 画像表示領域用の余白
	// 変数の定義
	imgWidth = document.getElementById('image1').width; // 画像の幅
	imgHeight = document.getElementById('image1').height; // 画像の高さ
	winWidth = Math.floor(document.body.clientWidth * resizeRate - margin * 2); // 画像表示領域の幅
	winHeight = Math.floor(document.body.clientHeight * resizeRate - margin * 2); // 画像表示領域の高さ
	widthRate = imgWidth / winWidth; // 画像サイズと画像表示領域のサイズの比率 (幅)
	heightRate = imgHeight / winHeight; // 画像サイズと画像表示領域のサイズの比率 (高さ)
	if (widthRate >= 1 && heightRate >= 1){
		// 画像のwidth、height共に画面に収まらない場合
		if (widthRate > heightRate){
			// 画像のwidthの比率の方が大きい場合
			// widthに合わせてリサイズ
			document.getElementById('image1').style.width = winWidth;
			document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
		} else {
			// 画像のheightの比率の方が大きい場合
			// heightに合わせてリサイズ
			document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
			document.getElementById('image1').style.height = winHeight;
		}
	} else if (widthRate >= 1 && heightRate < 1){
		// 画像のwidthのみ画面に収まらない場合
		document.getElementById('image1').style.width = winWidth;
		document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
	} else if (widthRate < 1 && heightRate >= 1){
		// 画像のheightのみ画面に収まらない場合
		document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
		document.getElementById('image1').style.height = winHeight;
	} else {
		// 画像のwidht、heightともに画面に収まる場合
                  // 必要であれば処理を記述
	}
}
window.onresize = imgResize;
//-->
</script>
<style type="text/css">
<!--
body {
	margin:10px;
	padding:0px;
}
-->
</style>
</head>
<body onLoad="imgResize()">
<img src="./XXXXXX.jpg" id="image1" onClick="window.open('./XXXXXX.jpg','imgOriginalSize')">
</body>
</html>

このスクリプト、残念ながら1点大きな欠点があります。一度ウィンドウサイズを小さくして画像表示を小さくした後、ウィンドウサイズを広げても画像が大きくなりません。この理由は document.getElementById('image1').width で取得する値がリサイズ後の値になってしまうことです。元の画像サイズそのものを取得しているわけではなく、あくまでも表示上のサイズを取得しているんですよね…。おそらく、最近ではタブブラウザを使っている人も多く、ウィンドウサイズを頻繁に変更する人は少ないと思いますので、初回表示時に画像が画面に収まれば問題ないとは思うのですが、どうにも気持ち悪いです。残念。(有識者の皆さん、「こうすれば良いんじゃないの。」などのご助言お願いいたします。)ということでオマケでonClickで元画像を開くようなソースにしてみました。最近のブラウザは画像ファイルを開くと自動的にウィンドウに収まるようになっていますが、この機能で十分かもしれません。そんなこんなで回答するのは控えておきました。
ちなみにFirefoxではCSSでbodyタグに設定しているmarginとJavaScriptで設定するmarginを同じ値にして正しく動作したのですが、IEではなぜか縦のスクロールバーが出てしまったため、JavaScript内で指定しているmarginの値を少し大きめにしておきました。このあたりもダサいですね…。