【css】画像をアイコンで表示する方法

##　問題
SNSなどによくある円形のアイコン画像を表示したい

方法

最終結果(ヘッダーの右側)

コード

index.html

<div class="header-right">
    <button class="btn btn-success">予算</button>
    <button class="btn btn-success ml-1">予算登録</button>
    <button class="btn btn-success ml-1">支出登録</button>
    <div class="profile-picture profile-picture-header ml-1">
        <img class="img-fluid cursor_pointer" src="/assets/sample.jpg" alt="Profile Picture">
    </div>
</div>

style.scss

.profile-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  // ⭐️アイコンを円形にリサイズして配置
  display: flex;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 430px) {
    width: 75px;
    height: 75px;
  }

  // ヘッダーアイコン
  &.profile-picture-header {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    @media screen and (max-width: 430px) {
      width: 30px;
      height: 30px;
    }
  }

  img {
    // ⭐️アイコンを円形にリサイズして配置
    object-fit: cover;
  }
}

参考サイト