JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Image 1</h1>
<h2>Original Image</h2>
    <img src="http://f.cl.ly/items/2s0O3A041D0L2p1y2U19/1351085803_wide-off-center_t.jpeg" data-center-x="23.125" data-center-y="31" />
<h2>Cropped / Scaled Image</h2>
<div class="photo-2">
    <img src="http://f.cl.ly/items/2s0O3A041D0L2p1y2U19/1351085803_wide-off-center_t.jpeg" data-center-x="23.125" data-center-y="31" />
</div>
<hr/>
<h1>Image 2</h1>
<h2>Original Image</h2>
<img src="http://f.cl.ly/items/2S3n3d3E161n0S0R3b3R/1351086953_test-2_t.jpeg" data-center-x="85.2" data-center-y="87.6" />
<h2>Cropped / Scaled Image</h2>
<div class="photo-2">
    <img src="http://f.cl.ly/items/2S3n3d3E161n0S0R3b3R/1351086953_test-2_t.jpeg" data-center-x="85.2" data-center-y="87.6" />
</div>


<hr/>
<h1>Image 3</h1>
<h2>Original Image</h2>
    <img src="http://f.cl.ly/items/2l2j3c0B09441o1e0Z1n/Image%202012.10.24%2010:02:47%20AM.png" data-center-x="59.125" data-center-y="37.4296" />
<h2>Cropped / Scaled Image</h2>
<div class="photo-2">
    <img src="http://f.cl.ly/items/2l2j3c0B09441o1e0Z1n/Image%202012.10.24%2010:02:47%20AM.png" data-center-x="59.125" data-center-y="37.4296" />
</div>

CSS

.photo, .photo-2 {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
}

.photo-2 {
    margin-top: 15px;                            
}

.photo-2 img {
    /*height: 158px;*/
  /*  margin-left: -8px; */
}

JavaScript

$.fn.expand_photos_to_div = function(options) {  
    var settings = $.extend({
        'variable':false
    }, options);

    return this.each(function() {        
        var obj = this;
        var obj_height = $(obj).height();
        var obj_width = $(obj).width();
        var center_x = $(obj).find('img').attr('data-center-x');
        var center_y = $(obj).find('img').attr('data-center-y');

        $(obj).find('img').css({
            'max-width':'none',
            'max-height':'none'
        });
        
        var image_height = $(obj).find('img').height();
        var image_width = $(obj).find('img').width();
        
        var c_center_x = obj_width / 2.0;
        var c_center_y = obj_height / 2.0;
        var n_center_x = image_width * (center_x / 100.0);
        var n_center_y = image_height * (center_y / 100.0);
        
        if (image_width > image_height) {
            $(obj).find('img').css('max-height', obj_height + (n_center_y - c_center_y));   
            $(obj).find('img').css('margin-left', (n_center_y - c_center_y) * -1);
        } else {
            $(obj).find('img').css('max-width', obj_width + (n_center_x - c_center_x));   
            $(obj).find('img').css('margin-top', (n_center_x - c_center_x) * -1);            
        } 
    });
};

$('.photo-2').expand_photos_to_div();