Question

I have this 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 > 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
    };
}

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

Answer 1

in order to always fit the available space, you must consider the aspect ratio, so that if your screen/window/layer hasn’t the same a/r than the original image you crop it the minimum possible.
the r_w >r_I has this purpouse, choose if you need to fit width [hence cropping top/bottom of the image] or height [cropping left/right]