JSFiddle - React, Tailwind, and code Playground

HTML

<div class="original-image">
  <p>original image</p>
  <img src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: fill</p>
  <img class="object-fit_fill" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: contain</p>
  <img class="object-fit_contain" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: cover</p>
  <img class="object-fit_cover" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: none</p>
  <img class="object-fit_none" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
  <img class="object-fit_scale-down" src="http://lorempixel.com/500/200">
</div>

CSS

.object-fit_fill {
  object-fit: fill
}

.object-fit_contain {
  object-fit: contain
}

.object-fit_cover {
  object-fit: cover
}

.object-fit_none {
  object-fit: none
}

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

html {
  color: #eee;
  padding: 30px;
  font-family: 'Source Code Pro', Monaco;
  background-color: #333;
}

p {
  font-weight: 200;
  font-size: 13px;
  margin-bottom: 10px;
  margin-top: 0;
}

img {
  height: 120px;
  background-color: #444;
}

img[class] {
  width: 100%;
}

.original-image {
  margin-bottom: 50px;
}

.image {
  float: left;
  width: 160px;
  height: 160px;
  margin: 0 30px 20px 0;
  &:nth-child(2n) {
    clear: left;
  }
  &:nth-child(2n+1) {
    margin-right: 0;
  }
}