はじめに

CSSで画像の中央を丸く切り取って表示する方法についてまとめます。
正方形でない画像でも対応できるようにしました。

自分用のメモです。

方法

この画像の中央を丸く切り取って表示したいとします。

1. 画像を表示したい位置に空のdiv要素を書く

<divclass="circle-img sakaya-man"></div>

丸く切り取るためのクラス名circle-imgと、この画像を表わすクラス名sakaya-manをつけておきます。

2. 中央を丸く切り取るためのCSSを書く

.circle-img{width:100px;height:100px;/*widthとheightは同じ値にする*/border-radius:50%;background-size:cover;/*画像の大きさをいい感じに調整*/background-position:centercenter;/*画像をたてよこ両方向に中央寄せ*/}

widthとheightはお好みの値にしてください。

3. 画像を背景画像として設定する

.sakaya-man{background-image:url(画像のパス);}

丸く切り取りたい画像を、手順1で書いた空のdiv要素の背景画像として設定してあげましょう。

4. できあがり

めでたく画像の中央を丸く切り取って表示することができました。

まとめ

このようにすればcircle-imgを使い回しすることができるので、便利だと思います。

おしまい。