JSFiddle - React, Tailwind, and code Playground

HTML

<div class='box'>
<div class='wrap'>
<div class='inner'>
    <img src='http://qpleple.com/img/post-how-to-make-people-login-into-your-website-with-their-google-account/login-preferences.png' />
    </div>
</div>
    <div class='wrap'>
    <div class='inner'>
    <img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
    </div>
</div>
<div class='wrap'>
    <div class='inner'>
    <img src='http://cohenmach.global2.vic.edu.au/files/2011/10/Plants-Vs-Zombies.png' />
    </div>
</div>
    
    
</div>

CSS

.box{
    margin: 100px auto;
}
.wrap{
    padding:10px;
    border: 1px solid #777;
    width: 150px;
    height: 100px;
    overflow:visible;
    float:left;
    margin: 0px 20px 20px 0px;
}
.inner{
    width: 100%;
    height: 100%;
    overflow:visible;
    text-align:center;
    position:relative;
}
.inner img{
    max-width: 100%;
    position:absolute;
    left:0;top:0;
    
}

JavaScript

$("img").each(function(){
    var top_dif= ($(this).height()-$(this).parent().height())/2;
    var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});