jQuery ImageFitを利用して画像のサイズを合わせる

jQuery ImageFit プラグインを利用することでバラバラの画像を同じサイズにトリミングしたかのように見せることができます。
画像ギャラリーなどに便利そうですね。

デモはこちら
ダウンロードはこちら

利用方法

div.imgFitの中のaタグに適用する場合です。
サイズはcssで指定します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="file/24/jquery.imagefit.min.js"></script>

Javascript

<script type="text/javascript">
$(window).load(function() {
  $('.imgFit a').imagefit({
        mode: 'inside', //指定サイズの中に入れるかはみ出させるかの指定: 'inside' or 'outside'.
    halign : 'center', //指定サイズのブロックに対する画像の配置横位置: 'left', 'center' or 'right'
    valign : 'middle' , //指定サイズのブロックに対する画像の配置縦位置: 'top', 'middle' or 'bottom'
        force : false //画像のサイズが指定サイズより小さい場合もリサイズするかどうか:true or false 
        });
});
</script>

CSS

.imgFit a {
    border: 1px solid #666;
    width: 200px;
    height: 200px;
    padding: 0;
    margin: 10px;
    display: inline-block;
}

HTML

<div class="imgFit">
<a href="#"><img src="sample1.png" alt=""></a>
<a href="#"><img src="sample2.png" alt=""></a>
<a href="#"><img src="sample3.png" alt=""></a>
</div>