Вращающиеся изображения с jQuery ... Но изменение размера не работает

Question

У меня есть изображение, которое нужно повернуть. Это изображение ориентировано либо на пейзаж, либо на портрет.

У меня есть форма HTML5, чтобы принимать степени вращения с шагом 90 каждый щелчок. Когда это значение изменяется, изображение должно вращаться и изменять размер. Он должен всегда иметь ширину 770 пикселей, но может быть такой же высокой, как и должен быть.

Я написал следующий обработчик событий, но он не работает так, как я ожидал.

Вариант использования: Когда изображение является портретом, это начальные значения 770x1027 (ш x ч). При повороте на 90 градусов, я ожидал бы, что функция ниже поворачивает изображение, задает ширину = 1027 и height = 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

Как о попытке его с помощью метода JQuery на самом деле сделал для изменения свойств CSS, таким образом было бы легче отслеживать ваши переменные и поместить их в нужных местах:

$("#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)' 
    }); 
});