Question

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

我有一个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;"
    })
});

Answer 1

你似乎已经改变了宽度和高度。

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

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

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

2 个答案: