画像を円形にマスクする、円形に切り抜いて表示する
CSSを利用して画像を円形にマスクして表示するコードを紹介します。
概要
画像を円形に切り抜くには、ブロック要素の矩形の枠の角を丸くして円形にすることで対応できます。CSSのborder-radiusプロパティを利用します。
例: 画像が正方形の場合
コード
下記のHTMLファイルとCSSファイルを作成します。
.CircleClip {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ImageCircleClip.css" />
</head>
<body>
<img class="CircleClip" src="icon.png" />
</body>
</html>
画像
icon.pngとして、下図の画像を利用します。正方形の画像であることに注意してください。
解説
Imgタグにクラス
CircleClipを指定しスタイルを指定します。スタイルの指定では border-radiusプロパティを50%で指定します。角のサイズが領域の50%のサイズになるため、正方形の枠が円形になります。
実行結果
HTMLファイルをWebブラウザで表示します。画像が円形に切り抜かれて、クリップできていることが確認できます。
例: 画像が長方形の場合
上記のコードで画像が正方形の場合は対応できますが、画像が長方形の場合、下図の結果になります。
下図のアイコンに置き換えて実行します。
画像が長方形のため、長方形の枠を円形に切り抜く動作になってしまい、楕円形になってしまいます。
対処法
imgタグで長方形の画像を表示すると枠のサイズが長方形になってしまうため、divタグの枠で幅と高さを明示的に指定し、正方形の枠とします。background-imageプロパティを利用し、画像は背景画像として設定します。
コード
下記のCSSとHTMLファイルを作成します。
.CircleClip {
width:12em;
height:12em;
border-radius: 50%;
background-image: url('icon-rect.png');
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ImageCircleClipRect.css" />
</head>
<body>
<div class="CircleClip"></div>
</body>
</html>
解説
divタグにCircleClipクラスを指定します。スタイルの設定では width, heightプロパティに12emを指定し正方形のサイズで設定します。画像は background-imageプロパティで指定します。
background-repeat:no-repeat;を指定することで、画像のタイル配置を無効にします。また、画像が長方形のため余白ができてしまうことを防ぐため、画像を拡大、縮小して枠にぴったち収まるように設定します。
background-size:cover;を指定すると、画像の縦横比を維持しつつ、画像の幅と高さの両方が領域を完全に覆うように画像を縮小します。
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。長方形の画像が円形に切り抜かれていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
