JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Keep in mind that the outer div must have a width and a height -->

<!-- Change the 'width' and 'height' params in the url to see that it works perfectly -->

<h4>Height > Width </h4> 
<div>   
  <img src="http://lorempixel.com/250/1000/people/" style="max-width: 100%; max-height: 100%">
</div>
<h4>Width > Height </h4> 
<div>
  <img src="http://lorempixel.com/1000/128/people/" style="max-width: 100%; max-height: 100%">
</div>
<h4>Width = Height</h4>
<div>
  <img src="http://lorempixel.com/500/500/people/" style="max-width: 100%; max-height: 100%">
</div>

CSS

/* Outer div */
div {
  /* Just some style */
  padding: 10px;
  border: 1px solid;
  margin: 0 auto;
  margin-bottom: 20px;
  /* Must have */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}