画像を親の要素のサイズに合わせてくれる imgLiquid という jQuery のプラグインが便利。
⇒ karacas/imgLiquid

imgLiquid のライセンスは MIT と GPL のデュアルライセンス。

大きな画像をサムネイル表示するサンプルを書いてみた。
⇒ imgLiquid サンプル

コードはこんな感じ。お手軽。


<script src="http://www.nilab.info/lib/js/jquery/1.11.1/jquery-1.11.1.min.js"></script>
<script src="http://www.nilab.info/lib/js/imgLiquid/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".image-frame").imgLiquid({
        fill: false // 縦横比を維持
    });
});
</script>
</head>
<body>
 
<h1>imgLiquid サンプル</h1>
 
<div style="width:320px; border: solid 2px #0000ff;">
横長画像(1023x767)を、縦横比を維持して縮小リサイズ(300x300)<br />
<div class="image-frame" style="width:300px; height:300px;"><img src="http://www.nilab.info/lab/twitterpic/550471729601335296_1.jpg" /></div>
</div>
 
<div style="width:320px; border: solid 2px #0000ff;">
縦長画像(1024x1396)を、縦横比を維持して縮小リサイズ(300x300)<br />
<div class="image-frame" style="width:300px; height:300px;"><img src="http://www.nilab.info/lab/twitterpic/550884125398155264_1.jpg" /></div>
</div>
 
<div style="width:320px; border: solid 2px #0000ff;">
小さい画像(160x160x)を、縦横比を維持して拡大リサイズ(300x300)<br />
<div class="image-frame" style="width:300px; height:300px;"><img src="http://www.nilab.info/z3/z3_profile.jpg" /></div>
</div>

サンプルコードはこのへんが参考になった
⇒ jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」
⇒ : imgLiquid サンプル

本家サイト karacas/imgLiquid にはオプションが列挙されている。


>js
    fill: true,
    verticalAlign:      // 'center' //  'top'   //  'bottom' // '50%'  // '10%'
    horizontalAlign:    // 'center' //  'left'  //  'right'  // '50%'  // '10%'
 
    //CallBacks
    onStart:        function(){},
    onFinish:       function(){},
    onItemStart:    function(index, container, img){},
    onItemFinish:   function(index, container, img){}
 
>hml5 data attr (overwrite js options)
    data-imgLiquid-fill="true"
    data-imgLiquid-horizontalAlign="center"
    data-imgLiquid-verticalAlign="50%"

ref. karacas/imgLiquid

tags: javascript jquery

Posted by NI-Lab. (@nilab)