CSS アイコン画像を丸くする方法
YoutubeなどのWEBサービスでアイコンを丸く切り抜いたような画像をCSSで実装します。
特徴
- CSSだけで実装
- 画像は正方形でなくてもOK(中央寄せ)
デモ
See the Pen
circle icon by Aquarium (@aquarium)
on CodePen.
HTML
<figure class="icon-circle"><img src="https://picsum.photos/id/237/540/540" alt=""></figure>
<figure class="icon-circle"><img src="https://picsum.photos/id/238/540/540" alt=""></figure>
<figure class="icon-circle"><img src="https://picsum.photos/id/239/540/540" alt=""></figure>
<figure class="icon-circle"><img src="https://picsum.photos/id/240/540/540" alt=""></figure>
.icon-circle
内の画像に適用するように作っています。
CSS
.icon-circle{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.icon-circle img{
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
border-radius
で要素を丸くします。img
にposition
とtop, left, right, bottom
、margin: auto;
を指定し、要素内で天地中央に移動するようにします。icon-circle
のwidth
height
は変更可能です。