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

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

サイトのキャプチャ

ImageFit
ImageFit -GitHub

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'
});

top of page

©2017 coliss