Question

我有这段代码：

// 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
    };
}

为了完全理解，有人可以帮助切片吗？什么是r_w？什么是r_i？我们为什么要评估r_w > r_i？我在最后看到了返回函数，但是这些元素将分配给哪个元素width，height，left和top？分配此$img.src = img;有什么意义？提前谢谢！

Answer 1

为了始终适合可用空间，您必须考虑纵横比，这样，如果您的屏幕/窗口/图层与原始图像的a / r不同，则可以尽可能地裁剪它。 r_w＆gt; r_I有这个purpouse，选择是否需要适合宽度[因此裁剪图像的顶部/底部]或高度[裁剪左/右]

使用jQuery使图像居中

1 个答案: