JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<!-- normal image size: width=427px x height=640px -->
<p>This is what I am working with..</p>
<div class="myImages"><img src="https://shop.brunellocucinelli.com/dw/image/v2/ABCP_PRD/on/demandware.static/-/Sites-catalog-master-bc/default/dwb50b9ffa/images/large/201MR4051712CB775-F.jpg?sw=675"></div>
<p>This it what i need the img to look like..</p>
<div class="myImages2"></div>

CSS

.myImages {
    height:200px;
    width:300px;
    overflow:hidden;    
}
.wide-img{
    margin-left:-50%;
    height:100%;
}
.tall-img{
    margin-top:-50%;
    width:100%;
}

.myImages2 {
    background: url('https://shop.brunellocucinelli.com/dw/image/v2/ABCP_PRD/on/demandware.static/-/Sites-catalog-master-bc/default/dwb50b9ffa/images/large/201MR4051712CB775-F.jpg?sw=675');
    background-position: center center;
    background-size: cover;
    width:300px;
    height: 200px;
    overflow: hidden;
}

JavaScript

$(function(){
    $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });
});