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

harada 3,844views 更新:2014年4月25日

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>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません