• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

clip: の値

clip: プロパティの値は以下の2種です。rect() では、各辺までの距離を指定できます。
autoマスクしない(初期値)
rectrect(上,右,下,左) で距離を指定


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

サンプルですが、まずは以下の縦長の画像を正方形にマスクしてみます。
csscliprect01
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() で長方形の画像を正方形にマスク(2)

続いて、以下の横長の画像を正方形にマスクしてみます。
csscliprect02
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;
}
正方形にマスクした結果はこちらです。
正方形にマスクしたデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください