php - 单击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 的尺寸，传递给函数的图像，而不是除被单击的图像之外的任何 div 或其他元素。如果您想根据图像的相同 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";
        }
    }