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メモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

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

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note