JavaScriptでリキッドレイアウトの幅に合わせて画像サイズを変える

JavaScriptでリキッドレイアウトのレイアウト幅に合わせて画像サイズを自動的に変える方法です。

リキッドレイアウトでまず困るのがレイアウト幅が可変な部分に画像などを使用するとはみ出て表示されてしまうことだ。そのためJavaScriptで画像サイズを自動的に変えるものを簡単に作ってみた。

デモ
ダウンロード(v0.5.0)

特徴？

JQueryを利用しています。
IE6、7、8、Firefox最新、Safari最新、Opera最新、Chrome最新でテストしています。
基準とする幅を持った要素を元に画像サイズを計算しています。
綺麗な実装ではありません。
自分が他に作ったJavaScriptライブラリと関数の名称が被っている場合があります。

あれ？特徴じゃないや。。。（汗

被っている場合はまた注意書き追加します。(名前が干渉するライブラリはまだ未公開)

使い方

1. image_resize.jsを読み込むためにHTMLのheadタグ内に以下の記述をします。(コメントがUTF-8で記述されているためcharsetを指定します。)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="image_resize.js"></script>

2. image_resize.jsのset_original_image_size_wrapper()関数を書き換えます。

自動的にサイズを変えたい要素をセレクタで指定します。画像以外にも適用できます。

複数の要素を指定したい場合は、set_original_image_size()で自動的にサイズを変えたい要素を複数指定してください。同じ関数を複数呼び出してもらってもOKです。

jQueryを利用している方にはすぐ分かると思いますが、jQueryのセレクタ書式です。

/*
 * 元の画像サイズを保存する関数
 */
function set_original_image_size_wrapper()
{
	/*
	 * 基準の幅になる要素をset_original_image_sizeで指定します。
	 * 複数指定したいものがある場合は、続けて同じ関数を呼び出します。
	 * 第1引数: リサイズする要素
	 */
	set_original_image_size('div#content img');
}

3. image_resize.jsのimage_resize_wrapper()関数を書き換えます。

基準になる幅を持った要素と自動的にサイズを変えたい要素をセレクタで指定します。画像以外にも適用できます。

複数の要素を指定したい場合は、image_resize()の第2引数で自動的にサイズを変えたい要素を複数指定してください。同じ関数を複数呼び出してもらってもOKです。

jQueryを利用している方にはすぐ分かると思いますが、jQueryのセレクタ書式です。

/*
 * 画像をリサイズする関数
 */
function image_resize_wrapper()
{
	/*
	 * 基準の幅になる要素をimage_resize関数で指定します。
	 * 複数指定したいものがある場合は、続けて同じ関数を呼び出します。
	 * 第1引数: 幅の基準となるブロック要素
	 * 第2引数: 基準に合わせてリサイズする要素
	 * 第3引数: 縦サイズもリサイズする場合、true
	 */
	image_resize('div#content h2','div#content img',true);
}