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 img").load(Lya_Lya())
function Lya_Lya(){ 
        $(".b-image").each(function(){
           $img = $(this).find("img")
           $src = $img.attr("src");
           $thisWidth = $(this).width()
           $img.width()<$thisWidth?$(this).css({"background-size":"100%"}):"";
           $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 {
 
    
   display: inline-block;
   vertical-align: middle;
}
.b-image{
    background-position: center center;
    background-repeat: no-repeat;
    
}