JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image">
    <img src="http://static.squarespace.com/static/507c8e39e4b0a5bf1c9d4a71/t/522f957de4b05dc312e8d545/1378850174518/BLURREDLINES.png" />
</div>

CSS

#image{
    width:200px;
    height:120px;
    overflow:hidden;
}

JavaScript

function centerImages(){
    // you can define an exect area but we will do this for all images for now.
    var $images = $('img');
    
    $images.each(function(){
        var $pWidth = $(this).parent().width();
        var $pHeight = $(this).parent().height();
        var $width = $(this).width();
        var $height = $(this).height();
        
        if($pWidth < $width) var $wDiff = ($width - $pWidth) / 2;
        if($pHeight < $height) var $hDiff = ($height - $pHeight) / 2;
        
        $(this).animate({
            marginLeft: '-'+$wDiff+'px',
            marginTop: '-'+$hDiff+'px'
        });
    });   
}

centerImages();