画像を直接加工することなくCSSで丸く円形にくり抜いて表示したい

四角い画像を丸く表示させたい場合というのも結構ありそうな気がします。わざわざ画像を直接加工しなくても、スタイルシートを使うだけで丸く表示できます。

PNGやJPEGなど画像形式が何であっても、ファイルに収録される画像データは四角形です。なので(当たり前ですが)そのままウェブ上に掲載すれば四角形の画像として表示されます。これを丸くカットして円形で表示させたいとなると、例えば画像そのものを加工して、円形に範囲選択してから外側を透明色にするなどの方法があります。しかし、画像を加工しなければならないので手間が掛かりますし、修正したくなった際にも面倒です。
スタイルシートには、画像の一部分だけを表示するclipやらmaskやらのプロパティもありますが、サポート状況は今ひとつです。

というわけで、たぶん、画像を丸く円形に表示するには、角丸にする際に使うborder-radiusプロパティをベースにしてスタイルシートを書くのが楽ではないかと思います。
以下でその方法を簡単に解説してみます。

四角い画像をスタイルシートで丸く円形に表示させる方法2通り

画像を丸く円形に表示するにあたって、

1. 画像の縦横比を崩しても構わない場合と、
2. 画像の縦横比を維持したい場合

の2通りを解説します。

ここでサンプルに使う画像は、上記の2枚です。
風景写真だと縦横比の崩れが分かりにくいですが、イラストだとすぐに分かりますので2種類用意しました。それぞれの表示例を掲載していますから、見比べてみて下さい。

1. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を崩しても構わない場合)

まずは、画像の縦横比を崩しても構わない場合の例です。
左から順に、「ただ画像を円形にしただけ」・「円形の枠線を加えて画像を丸くしたところ」・「円形の枠線と丸くした画像の間に空白を入れた例」です。

上記のように、簡単に正円に表示できます。
上記の例では写真が川なので分かりにくいですが、元が横長の画像なので横方向に縮んで表示されています。以下のようにイラストを含む画像だと分かりやすいでしょう。

このように縦横比を崩して構わないのであれば(もしくは元画像が正方形なのであれば)、記述するHTML・CSSソースはとても単純で、以下の通りです。

<img src="summerriver.jpg" alt="写真">

上記のように単にimg要素を使って画像を掲載した上で、以下のCSSを適用します。

img {
	border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
	width:  180px;       /* ※縦横を同値に */
	height: 180px;       /* ※縦横を同値に */
}

ボックスの角を丸くするためのborder-radiusプロパティに値「50%」を指定しています。border-radiusプロパティの値には、角丸の半径を指定します。50%を指定すれば「ボックスの半分の長さ」を半径にして角が丸くなるので、(ボックスが正方形であれば)結果的に正円になります。

あとは、widthプロパティとheightプロパティに同じ値を指定して、画像が正方形で表示されるようにしてやれば完成です。
ただ、この方法だと(widthやheightで強引に縦横の長さを固定しているので)元の画像が長方形であれば、縦横比は崩れます。
画像が元々正方形だったり、縦横比が崩れても構わないのであれば、この方法がとても簡単です。

なお、画像の周囲に枠線を引く方法については、別途「画像に枠線を付ける方法」で解説していますのでそちらをご参照下さい。

2. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を維持したい場合)

さて、画像を掲載する場合、たいていは縦横比を維持したいでしょう。その上で、画像を正円で表示させたいなら、画像の一部分を切り抜いた上で円形に見せる必要があります。
例えば、以下のようにです。

上記の場合は画像の縦横比が維持されていて、正円の中には画像の一部分だけが表示されています。左から順に「横長画像の左側を使って円形にした場合」・「横長画像の中央を使って円形にした場合」・「横長画像の右側を使って円形にした場合」です。

このように表示させるCSSソースは、先程よりは若干長くなりますが、しかし特に難しくはありません。先程とは違って、CSSソース側で画像ファイルを指定します。

<p class="trim-image-to-circle">
	掲載用領域
</p>

上記のようにHTMLソースでは単に表示用の領域を確保するだけです。ここではp要素を使いましたが他の要素でも構いません。その上で、以下のCSSを適用します。

.trim-image-to-circle {
	background-image: url("summerriver.jpg");  /* 表示する画像 */
	width:  180px;       /* ※縦横を同値に */
	height: 180px;       /* ※縦横を同値に */
	border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
	background-position: left top;  /* 横長画像の左上を基準に表示 */
	display: inline-block;          /* 複数の画像を横に並べたい場合 */
}

このCSSソースで記述しているのは、下記の5点です。

1. まず、background-imageプロパティを使って、表示したい画像を「背景画像」として指定します。
2. 次に、widthプロパティとheightプロパティに同じ値を指定して、望みのサイズ(正方形)で表示させます。
3. ボックスの角を丸くするborder-radiusプロパティには値「50%」を指定することで、円形にカットされるようにします。
4. さらに、背景画像の表示位置を指定するbackground-positionプロパティを使って、画像のどの部分を使いたいかを指定します。上記の場合は「left top」を指定しているので、画像の左上を基準にして表示されます。
5. 最後(7行目)のdisplayプロパティは、(画像の表示領域としてp要素などのブロックレベル要素を使った場合で)複数の画像を横向きに並べて配置したい際には必要です。そうでない場合は省略しても問題ありません。

以上です。
もし、画像の中央を基準にして表示させたいなら、

background-position: center center;

右下を基準にして表示させたいなら、

background-position: right bottom;

のように記述すると良いでしょう。

2B. 縦横比を維持したまま円形で表示した上で、枠線を付加したい場合

画像を丸くした上で、その画像の周囲に円形の枠線を付加する(A)には、単にborderプロパティを追記すれば良いだけです。画像自体を「背景画像」として表示させているため、枠線を半透明にすることで、以下の右側(B)のように見せることもできます。

上記のように見せるには、先程のCSSソースに以下の1行(7行目)を加えれば良いだけです。

.trim-image-to-circle {
	background-image: url("summerriver.jpg");
	width:  180px;
	height: 180px;
	border-radius: 50%;
	background-position: left top;
	border: 9px solid #00cc00; /* 枠線を付加 */
}

もし、枠線を半透明にしたいなら、RGBAカラーモデルを使って(上記の7行目を)以下のように変更します。

	border: 12px solid rgba(0,255,0,0.5); /* 半透明の枠線を付加 */

上記では、rgba(0,255,0,0.5)の部分で「半透明の緑色」を指定しています。
このRGBAカラーモデルを使った半透明の表現方法については、別途「テキストの背景色を半透明にしつつ、文字色は不透明にする方法」などをご参照下さい。

というわけで、以上、画像を丸く円形にくり抜いて表示する方法でした！
なお、全く異なる方法で「画像の周囲をグラデーションでぼかしながら丸くくり抜くCSS」というのも解説していますのでそちらもよろしければどうぞ。

(更新日：2017年07月03日)