[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit

サイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。

ImageFit
ImageFit -GitHub

• ImageFitのデモ
• ImageFitの使い方

ImageFitのデモ

デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。
下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。

デモページ

まずは、トリミング状態。
トリミングした際に、左寄せ、右寄せ、中央寄せ、天地寄せなども設定できます。

トリミングしてフィット

デモでは、スクリプトのオプションを試すこともできます。

スクリプトのオプション

トリミング状態は「mode」の「outside」で、「inside」に変更してみます。

画像全体が矩形にフィット

「align」で配置の調整も可能です。

左右は左寄せ、天地は上寄せで配置

ImageFitの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src='//code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='jquery.imagefit.js'></script>

Step 2: HTML

画像はdiv要素などで内包し、同じclassをつけておきます。

<div class="im"><img src="images/01.jpg" alt=""></div>
<div class="im"><img src="images/02.jpg" alt=""></div>
<div class="im"><img src="images/03.jpg" alt=""></div>
<div class="im"><img src="images/04.jpg" alt=""></div>
<div class="im"><img src="images/05.jpg" alt=""></div>
<div class="im"><img src="images/06.jpg" alt=""></div>

Step 3: JavaScript

jQueryのセレクタで指定し、スクリプトを実行します。

$(window).load(function() {
    $('div.im').imagefit();
});

オプションでは配置のモードや位置を設定できます。

mode

画像の外側でぴったりさせるか、内側でぴったりさせるか

force

画像のサイズが容器より小さい時の対応

halign

水平方向での位置

valign

垂直方向での位置

オプションを使用すると、こんな感じに記述します。

$('div.im').imagefit({
	mode: 'inside',
	force : 'true',
	halign : left,
	valign : 'top'
});