[CSS]CSSのclipで長方形の画像を正方形で切り抜き（マスク）する方法

CSSプロパティ

2013.04.23

CSSの要素の切り抜き領域を指定するプロパティclipを使えば、画像を切り抜き表示させることができます。

デザインに合わせて長方形の画像を正方形にマスクする必要がある場合などに使えます。

clip: の値
clip:rect() で長方形の画像を正方形にマスク（１）
clip:rect() で長方形の画像を正方形にマスク（２）

clip: の値

clip:プロパティの値は以下の2種です。

auto	マスクしない（初期値）
rect	rect(上,右,下,左) で距離を指定

rect()では、各辺までの距離を指定できます。

clip:rect() で長方形の画像を正方形にマスク（１）

サンプルですが、まずは以下の縦長の画像を正方形にマスクしてみます。

CSSですが、今回のような画像の場合はclip:rect()と合わせてネガティブマージンで画像の位置を補正します。

div.cliprect01	{
	position:relative
}

div.cliprect01 img {
	width:250px;
	height:auto;
	clip:rect(0px 250px 375px 0px);
	margin-top:-125px;
	position:absolute;
}

div.cliprect01 {

position:relative

}

div.cliprect01 img {

width:250px;

height:auto;

clip:rect(0px 250px 375px 0px);

margin-top:-125px;

position:absolute;

}

正方形にマスクした結果はこちら。

正方形にマスクしたデモ

clip:rect() で長方形の画像を正方形にマスク（２）

続いて、以下の横長の画像を正方形にマスクしてみます。

CSSですが、同じくclip:rect()と合わせてネガティブマージンで画像の位置を補正します。

div.cliprect02	{
	position:relative
}

div.cliprect02 img {
	width:500px;
	height:auto;
	clip:rect(0px 375px 250px 0px);
	margin-left:-125px;
	position:absolute;
}