JSFiddle - React, Tailwind, and code Playground

by crazyboris

HTML

<div class="container">

<div class="frame-wrapper">
<span class="helper"></span>
  <div class="frame">
    <span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
    </div>  
</div>

</div>

CSS

.container{
   position: relative;
   width: 100px;
   height: 100px;
   border: 1px solid;}
   
.frame-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;}
  
.frame {
    /* equals max image height */
    position:relative;
    display: inline-block;
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: middle;}
    
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;}

img {
    vertical-align: bottom;
    max-width: 100%;
    max-height: 100%;}