javascript - 缩放图像到中心jQuery或JavaScript

如果我把图像放大，它就会向右。下面是我的js函数。当我缩放图像时，背景的实际宽度和高度是恒定的，只有背景的大小应该是动态的。这就是为什么它看起来像如果它放大它会去右边而不是在中心。我想要的是当我缩放图像时，它会向前缩放到图像的中心。

function zooms(zoomType) {
    switch(zoomType) {
        case '+':
            newW += 10;
            break;
        case '-':
            newW -= 10;
            break
    }

    if(newW <= 0) {
        newW = 0;
    } else {
        if(newW >= 100) {
            newW = 100;
        }
    }
    return newW;
}

function backgroundAdjust(num, el) {
    wid = (parseInt(num)+parseInt(el.width()));
    el.css({
        'background-size': wid + 'px auto'
    });
    return;
}

$('input.zoomButton').click(function() {
    zoomType = $(this).val();
    zoomNum = zooms(zoomType);
    backgroundAdjust(zoomNum, $('#uploadImage'));
});

最佳答案

如果您的图像是正方形的，则应该这样做：它会偏移背景图像，使其中心保持在包含元素的中心。

var posx = (el.width()-wid)/2;
var posy = (el.height()-wid)/2;
el.css({
        'background-size': wid + 'px auto',
        'background-position': posx +'px ' +posy +'px'
    });