はじめに
CSSで画像の中央を丸く切り取って表示する方法についてまとめます。
正方形でない画像でも対応できるようにしました。
自分用のメモです。
方法
この画像の中央を丸く切り取って表示したいとします。
1. 画像を表示したいところに空のdiv要素を書く
index.html
<div class="circle-img daiginjo"></div>
丸く切り取るためのクラス名circle-imgと、この画像を表わすクラス名daiginjoをつけておきます。
2. 中央を丸く切り取るためのCSSを書く
styles.css
.circle-img {
width: 100px;
height: 100px; /*widthとheightは同じ値にする*/
border-radius: 50%;
background-size: cover; /*画像をいい感じの大きさに調整*/
background-position: center center; /*画像をタテヨコ両方向に中央寄せ*/
}
widthとheightはお好みの値にしてください。
3. 画像を背景画像として設定する
styles.css
.daiginjo {
background-image: url(画像のパス);
}
丸く切り取りたい画像を、手順1で書いた空のdiv要素の背景画像として設定してあげましょう。
4. できあがり
めでたく画像の中央を丸く切り取って表示することができました。
まとめ
このようにすればcircle-img を使い回しすることができるので、便利だと思います。
おしまい。