Centering the image with jQuery
<p>I have this code:</p>

<pre><code>// gets the image size and position in order to make it fullscreen and centered.    
getImageDim = function(img) {
    var $img = new Image();
    $img.src = img;

    var $win = $(window),
        w_w = $win.width(),
        w_h = $win.height(),
        r_w = w_h / w_w,
        i_w = $img.width,
        i_h = $img.height,
        r_i = i_h / i_w,
        new_w, new_h, new_left, new_top;

    if (r_w &gt; r_i) {    
        new_h = w_h;
        new_w = w_h / r_i;
    }
    else {    
        new_h = w_w * r_i;
        new_w = w_w;
    }

    return {
        width: new_w,
        height: new_h,
        left: (w_w - new_w) / 2,
        top: (w_h - new_h) / 2
    };
}
</code></pre>

<p>Can anybody help to slice this in order to fully understand? What is <code>r_w</code>? What is <code>r_i</code>? Why we are evaluating <code>r_w &gt; r_i</code>? I see the return function at the end, but to which element these <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> values will be assigned? What is the point of assigning this <code>$img.src    = img;</code> ? Thanks in advance!</p>
