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

CSS

2014.03.07

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

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

横＊高さ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で画像をトリミングしてセンタリング表示するデモ

参考サイト
http://www.arcanaworks.jp/tips/jquery%E3%81%A8css%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E3%83%88%E3%83%AA%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%97%E3%81%A6%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B