CSSで画像を切り抜いてサムネイルにする

AICA研究室 畠山 貴史
2009年10月30日

CSSを使って画像の一部分を切り抜いてサムネイル画像を作成する方法を紹介します。

加工前

ソース 

<div class="thumbnail"></div>

.thumbnail{
	width : 128px;
	height : 128px;
	background-image : url("thumbnail.png");
	background-position : center;
	overflow : hidden;
}
widthとheightでサムネイルのサイズを指定し、background-positionで切り抜く位置を指定、 overflow:hiddenで余分な領域を非表示にして切り抜きます。
著者プロフィール

畠山 貴史

所属学科 : デジタルクリエイター科 １年

Webデザインの勉強中です。