JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="b-open-item-wrapper">
    <div class="b-open-item">
        <div class="item">
            <img src="http://repnikov.dev-dp.cupidplc.com/YOLO/i/temp/img39.jpg" alt=""  />    
        </div>
    </div>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
.b-open-item-wrapper{
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.b-open-item{
  width: 100%;
  height: 100%;
}
.item{
    vertical-align: middle;
    text-align: center;
    height: 100%;
    white-space: nowrap;
}
.item:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.item img{
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}