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;
}
.blue{background:blue}

img{
    max-height:100%;
    max-width:100%;
}
.vcenter-ext { display: table; background:orange }
.center-int { display: table-cell; vertical-align: middle;background:purple }