JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="avatar">
  <img src="https://via.placeholder.com/300" alt="" class="avatar__img">
</div>

<hr>

<div class="what">
  <img src="https://via.placeholder.com/300" alt="" class="what__img">
</div>

SCSS

.avatar {
  height: 5rem;
  display: flex;
  
  &__img {
    object-fit: cover;
  }
}

.what {
  max-height: 5rem;
  display: flex;
  
  &__img {
    object-fit: cover;
  }
}