JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail vcenter-int">
      <img src="http://placehold.it/200x300" />
  </div>
</div>
<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail blue vcenter-int">
    <img src="http://placehold.it/500x400"/>
  </div>
</div>  
<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail vcenter-int">
      <img src="http://placehold.it/100x100" />
  </div>
</div>
<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail blue vcenter-int">
    <img src="http://placehold.it/100x200"/>

  </div>
</div>

CSS

.thumbnail_container {
     position: relative;
     width: 25%;
     padding-bottom: 25%;
    background:green;
    float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    text-align:center;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.blue{background:blue}

img{
    max-height:100%;
    max-width:100%;

}
.vcenter-ext { background:orange }
.center-int { background:purple }