[JS]エレメントの背景画像のサイズを自動的に表示サイズに合わせて最適化するスクリプト -jQuery Anystretch

サイト構築 -JavaScript

Post on:2012年3月5日

Anystretchのデモ

まずは、デモからご紹介。
一番上のエレメントの背景「にぎり寿司」に注目してください。

ブラウザのサイズを幅：1200pxで表示します。

デモページ：幅1200pxで表示

[ad#ad-2]

幅:800pxに変更してみます。
「にぎり寿司」の画像は表示サイズを変更しても、エレメントの幅いっぱいに表示されます。
もちろんアスペクト比は維持されています。

デモページ：幅800pxで表示

幅：480pxに小さくしても、エレメントの幅いっぱいに表示されます。

デモページ：幅480pxで表示

Anystretchの使い方

外部ファイル

「jquery.js」と当スクリプトをページの下、</body>の上あたりに記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.anystretch.min.js"></script>

HTML

HTMLの記述は通常通りです。下記はデモページの一番上のコードです。
※jQueryのセレクタで背景を表示するエレメントを指定します。

<div class="div01">
	<div>
		<h2>Element with hardly any content</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
	</div>
</div>

JavaScript

jQueryのセレクタで背景画像を設置するエレメントを指定します。

<script type="text/javascript">
	$('.div01').anystretch("img01.jpg");
</script>

ロード時のタイミングを設定することもできます。

<script type="text/javascript">
	$.anystretch("/path/to/image.jpg", {speed: 150});
</script>

ロード後、画像を変更することもできます。

<script type="text/javascript">
	$.anystretch("/path/to/image.jpg", {speed: 150});

// Perhaps you'd like to change the image on a button click
	$(".button").click(function() {
		$.anystretch("/path/to/next_image.jpg");
	});
</script>