スポンサード

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

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

clip: の値

clip: プロパティの値は以下の2種です。rect() では、各辺までの距離を指定できます。

auto	マスクしない（初期値）
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;
}

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

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;
}

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

スポンサード