画像を中心にズームjqueryまたはjavascript

Question

ズームすると右に移動します。ここに私の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')); 
}); 

Answer 1

あなたのイメージが正方形である場合、これは動作するはずです：それは、背景画像を相殺し、その中心が含む要素の中心に残るようにします。

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' 
    });