JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chooser-container short">
  <div style="height: 84px; width: 84px;">
    <button>
      <div class="photo-view">
        <img src="https://maps.googleapis.com/maps/api/place/js/PhotoService.GetPhoto?1sCkQ2AAAASLfPdAmRHvF0IzLegf2sb-xVWuPUlvnwRwQ4EibFM95yJe0DmPflzgPfqltrxvQ5hY1ZX1F7P0M2BZWJ__E1YhIQREDfB9B2vcZ7QUfU8jyTERoUlDcRalN5eXKqCPqCFdTdEsfxQNA&amp;3u180&amp;5m1&amp;2e1&amp;callback=none&amp;key=AIzaSyCiAZPj19KM7OHb1OM5XluBVqCbTvrxGm8&amp;token=70782" />
      </div>
    </button>
  </div>
</div>

<div class="chooser-container long">
  <div style="height: 84px; width: 84px;">
    <button>
      <div class="photo-view">
        <img src="https://maps.googleapis.com/maps/api/place/js/PhotoService.GetPhoto?1sCkQ2AAAASLfPdAmRHvF0IzLegf2sb-xVWuPUlvnwRwQ4EibFM95yJe0DmPflzgPfqltrxvQ5hY1ZX1F7P0M2BZWJ__E1YhIQREDfB9B2vcZ7QUfU8jyTERoUlDcRalN5eXKqCPqCFdTdEsfxQNA&amp;3u180&amp;5m1&amp;2e1&amp;callback=none&amp;key=AIzaSyCiAZPj19KM7OHb1OM5XluBVqCbTvrxGm8&amp;token=70782" />
      </div>
    </button>
  </div>
</div>

CSS

.chooser-container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100px;
  margin: 16px 0;
  padding: 4px;
  transform: translate(0px, 0px);
}

.chooser-container.short {
  height: 80px;
}

.chooser-container.long {
  height: 100px;
}

button {
  background-image: none;
  background-size: cover;
  border-width: 0;
  border-radius: 50%;
  box-shadow: 0 1px 4px 0 rgba(60,64,67,.51);
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
}

button:hover {
  outline: 0;
  transform: scale(1.05); 
  /* transform: scale3d(1.05, 1.05, 1.05); */ /* Works with scale3d */
}

button .photo-view {
  overflow: hidden;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

button img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}