■お問い合わせ ■当サイトへのリンク ■サイト仕様 ■

画像を自動縮小するJavaScript

Webデザインをしている際に、ブラウザの表示サイズによっては親要素の横幅よりもサイズの大きな画像が配置されてしまうことが起こるかもしれません。overflow:hiddenにしてレイアウトを崩さないようにできますが、親要素の横幅よりも画像サイズが大きければ、画像を縮小してしまおうというアプローチもあるわけです。ちょっと必要があって、そのような処理をさせるScriptを書いてみました。

jQueryを使うので、まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。確認はしていませんが、おそらくjQueryのどのバージョンでも大丈夫でしょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません。

続けてjQueryを読み込ませた次の行へ以下のようにJavaScriptを記述してください。この部分は外部のJavaScriptファイルにしておいたほうがメンテナンスが楽になります。

<script type="text/javascript">
$(function() {
	$('img').each(function() {
		var pwidth=($(this).parent().innerWidth());
		var phzoom=pwidth/$(this).innerWidth();
		if (phzoom<1) {
			$(this).width(pwidth);
			$(this).height($(this).innerHeight()*phzoom);
		}
	});
});
</script>

この例では画像であるIMG要素を指定してページ内全ての画像を処理対象にしていますが、もっと絞り込んだ指定をして特定の画像だけを処理をすることも可能です。

box-shadowを使いたいなどの理由で縮小時に余白がほしいのであれば、var pwidth=($(this).parent().innerWidth()-8);のように余白ぶんを確保しておけば、スタイルシート指定と組み合わせて対応できます。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Opera、それとChrome for Androidを用いて表示を確認しました。