jQuery를 사용하여 이미지 회전 ...하지만 크기 조정이 작동하지 않습니다.

Question

회전해야하는 이미지가 있습니다. 이 이미지는 가로 또는 세로 중 하나를 지향합니다.

각 단계를 90 번 클릭하여 회전 각도를 허용하는 HTML5 형식이 있습니다. 이 값이 변경되면 이미지가 회전하고 크기가 조정되어야합니다. 크기는 항상 770 픽셀이어야하지만 높이가되어야합니다.

다음 이벤트 처리기를 작성했지만 기대했던대로 작동하지 않습니다.

사용 사례 : 이미지가 세로 인 경우 초기 값은 770x1027 (w x h)입니다. 각도를 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)' 
    }); 
});