[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法

スポンサード

jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。

横＊高さ 180px の正方形で画像をトリミング

横長（長方形）の画像を、jQuery とCSS で横*高さ180px の正方形にトリミングして表示するサンプルです。

jQuery

<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".thumbnail").on("load",function(){
		var iw, ih;
		var cw = 180;
		var ch = 180;
		iw = ($(this).width() - cw) / 2;
		ih = ($(this).height() - ch) / 2;
		$(this).css("top", "-"+ih+"px");
		$(this).css("left", "-"+iw+"px");
	 });
});
</script>

$(document).ready(function(){

$(".thumbnail").on("load",function(){

var iw, ih;

var cw = 180;

var ch = 180;

iw = ($(this).width() - cw) / 2;

ih = ($(this).height() - ch) / 2;

$(this).css("top", "-"+ih+"px");

$(this).css("left", "-"+iw+"px");

});

</script>

var cw = 180、var ch = 180 で、それぞれトリミング後の画像の横幅と高さを指定します。

CSS

div.trimming	{
	display:block;
	width:180px;
	height:180px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
div.trimming img.thumbnail	{
	float:left;
	position:absolute;
}

div.trimming {

display:block;

width:180px;

height:180px;

overflow:hidden;

position:relative;

z-index:1;

}

div.trimming img.thumbnail {

float:left;

position:absolute;

}

jQuery 同様、画像の親要素（.trimming）にトリミング後の横幅と高さであるwidth:180px、height:180px を指定します。

HTML

<div class="trimming">
<img src="images.jpg" class="thumbnail">
</div>

</div>

↓トリミングしたデモはこちらです。
jQuery とCSS で画像をトリミングしてセンタリング表示するデモ

参考サイト
画像編集いらず！jQueryとCSSだけで画像をトリミング＆センタリングする

スポンサード