JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Full size.
</p>
<div class ="container">
    <img src = "https://thingd-media-ec2.thefancy.com/default/1068560261947855337_d151f486c7ed.jpg"  class="maxsize" />
</div>
<p>
Horizontal size.
</p>
<div class ="container">
    <img src = "https://thefancy-media-ec4.thefancy.com/commerce/original/20160119/7c0c344ead3a4cb987a42a937bb2923b.jpg" class="maxsize"/>
</div>
<p>
Vertical size.
</p>
<div class ="container">
    <img src = "https://thefancy-media-ec4.thefancy.com/commerce/original/20160119/85a264ca51ca4c28ac263216de9fec49.jpg" class="maxsize"/>
</div>

CSS

.container
{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid black;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    
}

.maxsize
{
    max-height:100%;
    max-width: 100%;
}