
画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「imgLiquid」
2013年4月12日jQueryプラグイン活用
たくさんの不特定サイズ画像を、均一サイズのサムネイルで並べたい時などに有効です。
JavaScript
(function($){ $(function(){ $('.thumbnail a').imgLiquid({ fill:true, fadeInTime:300 }); }); })(jQuery);
HTML
<div class="type"> <div class="img"> <a href="#"><img src="img01.png" alt="220x356(元画像)" /></a> <span class="caption">220x356(元画像)</span> </div> <div class="img thumbnail"> <a href="#" class="trimming200x200"><img src="img01.png" alt="200x200" /></a> <span class="caption">200x200</span> </div> <div class="img thumbnail"> <a href="#" class="trimming150x250"><img src="img01.png" alt="150x250" /></a> <span class="caption">150x250</span> </div> </div> <div class="type"> <div class="img"> <a href="#"><img src="img02.png" alt="元画像" /></a> <span class="caption">350x232(元画像)</span> </div> <div class="img thumbnail"> <a href="#" class="trimming200x200"><img src="img02.png" alt="200x200" /></a> <span class="caption">200x200</span> </div> <div class="img thumbnail"> <a href="#" class="trimming300x200"><img src="img02.png" alt="300x200" /></a> <span class="caption">300x200</span> </div> </div>
CSS
.type:after { display : table; clear : both; content : ''; margin-bottom: 30px; } .img { margin-right: 30px; float: left; } .img .caption { display: block; padding-top: 6px; font-size: 10px; color: #777777; text-align: center; } .thumbnail a { display: block; overflow: hidden; } .thumbnail .trimming200x200 { width: 200px; height: 200px; } .thumbnail .trimming150x250 { width: 150px; height: 250px; } .thumbnail .trimming300x200 { width: 300px; height: 200px; }