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

ページ上のさまざまなブロックレベルの要素の背景に設定した画像のサイズを自動的に、表示サイズに合わせて最適化するjQueryのプラグインを紹介します。

デモのキャプチャ

jQuery Anystretch -GitHub

Anystretchのデモ

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

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

デモのキャプチャ

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

幅: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>

スクリプトのオプション

speed
ロード後、画像を表示するスピード。
centeredX
画像の比率をX軸で調整。
centeredY
画像の比率をY軸で調整。
elPosition
body内以外に使用する際のCSSのポジション。

top of page

©2017 coliss