JSFiddle - React, Tailwind, and code Playground

HTML

<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery.com/i/try-jquery.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://www.google.com/logos/doodles/2017/brazil-national-day-2017-4807172314628096-2xa.gif" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdaU9Gk1ptaWF7kr34uUSg0ETD-o57nL1Db2hW392fQa1nZIZIc_9R9-Qr" class='max-fit' />
</div>


<!--
This tries to do a perfect fit
-->

CSS

img.max-fit {
  max-width: 100%;
  max-height: 100%;
}

div.img-fit {
  float: left;
  margin: 5px;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: #ccc;
  padding: 0;
  //  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}