JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cover resize">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class="cover resize">
    <img src="http://1.bp.blogspot.com/_N0TSGcQUzgU/SZMFf4gwoAI/AAAAAAAAArI/5bLq1eTZrzM/s640/4c225ec4fbab7f4cbb8409616565dc3b-orig.jpg" />
</div><div class="contain resize">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class="contain resize">
    <img src="http://1.bp.blogspot.com/_N0TSGcQUzgU/SZMFf4gwoAI/AAAAAAAAArI/5bLq1eTZrzM/s640/4c225ec4fbab7f4cbb8409616565dc3b-orig.jpg" />
</div>

<!-- -->
<div class="cover resize off">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class="cover resize off">
    <img src="http://1.bp.blogspot.com/_N0TSGcQUzgU/SZMFf4gwoAI/AAAAAAAAArI/5bLq1eTZrzM/s640/4c225ec4fbab7f4cbb8409616565dc3b-orig.jpg" />
</div><div class="contain resize off">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class="contain resize off">
    <img src="http://1.bp.blogspot.com/_N0TSGcQUzgU/SZMFf4gwoAI/AAAAAAAAArI/5bLq1eTZrzM/s640/4c225ec4fbab7f4cbb8409616565dc3b-orig.jpg" />
</div>

CSS

div {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    background: #ccc;
    overflow: hidden;
    margin-bottom: 2px;
}
div.off {
    width: 200px;
    height: 400px;
}

JavaScript

$('.resize').each(function(){
    var el = $(this).find('img'),
        pael = el.parent(),
        ph = pael.height(),
        pw = pael.width(),
        pr = pw/ph,
        img = new Image();
    
    img.src = el.attr('src');
    img.onload = function() {
        var w = this.width,
            h = this.height,
            sr = w/h;
        
        if (pael.hasClass('cover')) {
            if (pr > sr) {
                el.width(pw);   
            } else {
                el.height(ph);
            }
        } else if (pael.hasClass('contain')) {
            if (sr > pr) {
               el.width(pw);
            } else {
               el.height(ph);
            }
        }        
    }
});