Avatar Sizes

                    <section class="flex items-center justify-center p-8 gap-4">
  <div class="avatar">
    <div class="w-32 rounded">
      <img src="https://i.pravatar.cc/300?img=2" alt="Large avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded">
      <img src="https://i.pravatar.cc/300?img=3" alt="Medium avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-16 rounded">
      <img src="https://i.pravatar.cc/300?img=4" alt="Small avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-12 rounded">
      <img src="https://i.pravatar.cc/300?img=5" alt="Extra small avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-8 rounded">
      <img src="https://i.pravatar.cc/300?img=6" alt="Tiny avatar" />
    </div>
  </div>
</section>

<style>
  .avatar {
    position: relative;
    display: inline-flex;
  }
  
  .avatar > div {
    display: block;
    overflow: hidden;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>