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