在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"; 
     } 
    }