画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「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;
}