JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h2>object-fit: fill</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="fill"/>

  <img width="60" height="60"  src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="contain"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="cover"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="none"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="scale-down"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="scale-down narrow"/>

</div>

CSS

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}