JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
<p>original image</p>
<img src="http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Chrome-icon.png"> 
</div>

<div class="image">
  <p>object-fit: fill</p>
<img class="object-fit object-fit_fill" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div class="image">
  <p>object-fit: contain</p>
<img class="object-fit object-fit_contain" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div class="image">
  <p>object-fit: cover</p>
<img class="object-fit object-fit_cover" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div class="image">
  <p>object-fit: none</p>
<img class="object-fit object-fit_none" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
<img class="object-fit object-fit_scale-down" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
 </div>

CSS

.object-fit { width: 100%; }
.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 }

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

.image {
  float: left;
  width: 40%;
  margin: 0 20px 0px 0;
}