JSFiddle - React, Tailwind, and code Playground

HTML

<!-- normal image size: width=427px x height=640px -->
<p>This is what I am working with..</p>
<div class="myImages"><img src="http://farm6.staticflickr.com/5487/12392013643_d0a120c945_z.jpg"></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('http://farm6.staticflickr.com/5487/12392013643_d0a120c945_z.jpg');
    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');
        }
    });
});