[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit
Post on:2014年1月17日
サイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。
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' });
sponsors