JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c"><img src="http://bdzoom.com/wp-content/uploads/2011/11/ib815image-une-eruption-solaire-prise-avec-instrument-eit-installe-bord-satellite-soho-esa-nasa2.jpg" /></div>

CSS

.c{
    width: 100px;
    height: 200px;
    overflow: hidden;
}

JavaScript

$(function(){
    var containers = $('.c'), w = $(window);
    function onResize(){
        //resize code
        containers.each(function(){
            var $this = $(this),
                w = $this.width(),
                h = $this.height(),
                ratio = w/h,
                $img = $('img',$this); // supposing there is only one img in each container
            $img.css({'width':'auto','height':'auto'});
            var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
            console.log($img,(w-iw*(h/ih))/2);
            if(iratio>ratio){
                $img.css({
                    height:'100%',
                    width:'auto',
                    marginLeft: (w-iw*(h/ih))/2
                });
            }
            else{
                $img.css({
                    width:'100%',
                    height:'auto',
                    marginTop: (h-ih*(w/iw))/2
                });
            }
        });
    }
    w.bind('resize',onResize);
    //resize on each image load event
    $('img',containers).bind('load',onResize);
    onResize();
});