在jQuery中單擊按鈕更改圖像大小

Question

我正在進行圖像上載，並且需要爲圖像形狀添加功能。

有景觀，人像，廣場和全景按鈕。當用戶點擊其中任何一個時，div形狀將相應地改變。

這是正方形的代碼，但是當我點擊正方形時，它會拉伸圖像。我想改變div的形狀而不拉伸圖像。

$('#Square').on('click', function(){ 
    var images = $("#uploadedImage"); 
    for(i=0; i<images.length; i++) 
     images[i].onload = centerImage(images[i]); 

    function centerImage(img) { 
     if (img.width > img.height) { 
      var y = 160; 
      var x = img.width/img.height*y; 
      var marx = (x-y)/2; 
      img.style.height = y+"px"; 
      img.style.marginLeft = -(marx) + "px"; 
     } 
    } 
}); 

Answer 1

這是很難重新運行例如沒有更多的通用代碼，但你的功能明確的變化而變化IMG的尺寸，通過圖像的功能，而不是除了被點擊的圖像的任何股利或其他元素。如果您想要根據圖像的相同HxW測試更改div，請將函數的img。*部分更改爲$（'＃DivYouWant'）。*，您應該走上正確的軌道。沿線的東西：

function centerImage(img) { 
     if (img.width > img.height) { 
      var y = 160; 
      var x = img.width/img.height*y; 
      var marx = (x-y)/2; 
      $('#DivYouWannaMod').height = y+"px"; 
      $('#DivYouWannaMod').marginLeft = -(marx) + "px"; 
     } 
    }