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で要素を丸くします。
  • imgpositiontop, left, right, bottommargin: auto;を指定し、要素内で天地中央に移動するようにします。
  • icon-circlewidth heightは変更可能です。

おすすめ書籍

  • このエントリーをはてなブックマークに追加

デザイナーのUIメモ帳

レイアウト

Google Map

ヒーローエリア

画像

CSSデザインサンプル