使用 jQuery 旋转图像......但调整大小不起作用答案

【问题标题】：Rotating Images w/jQuery... But Resizing Isn't Working使用 jQuery 旋转图像......但调整大小不起作用
【发布时间】：2013-11-14 17:35:19
【问题描述】：

我有一张需要旋转的图片。此图像面向横向或纵向。

我有一个 HTML5 表单来接受每次点击 90 步的旋转度数。当这个值改变时，图像应该旋转和调整大小。它应始终为 770 像素宽，但可以根据需要设置高。

我已经编写了以下事件处理程序，但它没有按我预期的方式工作。

用例：当图像为纵向时，其初始值为 770x1027（宽 x 高）。将其旋转 90 度时，我希望下面的函数可以旋转图像，设置宽度 = 1027 和高度 = 770。但我看到的是宽度和高度都设置为 770。我没有看到什么?

$("#degrees").change(function(){
    var element$ = $("#photo-submission"),
        w = element$.width(), 
        h = element$.height(),
        deg = $(this).val();


    element$.removeAttr("style").attr({
        "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
    })
});

【问题讨论】：

是的，如果最初 w = 770, h = 1027...当我旋转 90 度时，我需要调整图像的大小，使其宽度仍然不超过 770，但是因为它现在在它的一侧，图像高度是我们的视觉宽度。令人困惑？我知道你的感受。
所以你只想扩展degrees % 180 == 90?

标签： javascript jquery css rotation

【解决方案1】：

你似乎改变了你的宽度和高度。

element$.removeAttr("style").attr({
    "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ w +"px; height: "+ h + "px;"
})

【讨论】：

【解决方案2】：

如何尝试使用实际用于更改 CSS 属性的 jQuery 方法，这样可以更轻松地跟踪变量并将它们放置在正确的位置：

$("#degrees").change(function(){
    var el  = $("#photo-submission"),
        w   = el.width(), 
        h   = el.height(),
        deg = this.value;

    el.css({
        '-webkit-transform' : 'rotate(' +deg+ 'deg)',
        width  : w,
        height : h
    });
});

FIDDLE

这样做的真正好处是您不必将宽度和高度设置为已有的值，这基本上就是您正在做的，所以这就足够了

$("#degrees").change(function(){
    $("#photo-submission").css({
        '-webkit-transform' : 'rotate(' + this.value + 'deg)'
    });
});

【讨论】：

感谢您的 JSFiddle，但它显示的是方形图像。那将是非常简单的。我正在尝试使用矩形图像，确保图像的左上角始终位于其容器的左上角，并且永远不会超过 770。
我完全不明白，你得到一个元素的高度和宽度，并在完全相同的元素上将高度和宽度设置为完全相同的值，这有什么变化?
哦，现在我明白了，如果您尝试保持图像的纵横比和位置旋转，我相信它会比这复杂得多。您可能应该查看变换原点和旋转（）是其快捷方式的变换矩阵。
是的，你明白了。对不起，我没有很好地解释它。感谢您的提示，我现在要研究一下。