JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="b-image">
    <div class="image-wrap m-align-x">
        <img src="http://mobine.ru/uploads/posts/2013-01/1359636698_zombie_gunship_0.jpg">
    </div>
</div>
            
<div class="b-image">
    <div class="image-wrap m-align-y">
        <img src="http://mobine.ru/uploads/posts/2013-02/thumbs/1359977235_bubble_birds_3_1.jpg">
    </div>
</div>
    <script>
        $(".b-image").each(function(){
           $src = $(this).find("img").attr("src")
           $(this).find("img").remove()
           $(this).css({"background-image":"url("+$src+")"})
        })
        
    </script>

CSS

.b-image {
    width:200px;
    height:150px;
    
    overflow: hidden;
    margin: 30px;    
        
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #c5c5c5;
}

.image-wrap.m-align-x {
    margin: 0 -9999px;        
}

.image-wrap.m-align-x img {   
    max-height: 150px;
    
    display: block;
    margin: auto;
}

.image-wrap.m-align-y {
    height: 5000px;
    
    position: relative;
    top: 50%;
    
    margin: -2500px 0 0;
    
    line-height: 5000px;
}

.image-wrap.m-align-y img {
   width: 100%;
    
   display: inline-block;
   vertical-align: middle;
}
.b-image{
    background-position: center center;
}