CSSの要素の切り抜き領域を指定するプロパティclipを使えば、画像を切り抜き表示させることができます。
デザインに合わせて長方形の画像を正方形にマスクする必要がある場合などに使えます。
clip: の値
clip:プロパティの値は以下の2種です。auto | マスクしない(初期値) |
---|---|
rect | rect(上,右,下,左) で距離を指定 |
rect()では、各辺までの距離を指定できます。
clip:rect() で長方形の画像を正方形にマスク(1)
サンプルですが、まずは以下の縦長の画像を正方形にマスクしてみます。
CSSですが、今回のような画像の場合はclip:rect()と合わせてネガティブマージンで画像の位置を補正します。
正方形にマスクした結果はこちら。
正方形にマスクしたデモ
clip:rect() で長方形の画像を正方形にマスク(2)
続いて、以下の横長の画像を正方形にマスクしてみます。
CSSですが、同じくclip:rect()と合わせてネガティブマージンで画像の位置を補正します。
正方形にマスクした結果はこちらです。
正方形にマスクしたデモ
コメント