jQueryRotate로 회전 한 후 이미지가 조금 커졌습니다.

Question

jQueryRotate v2.0과 v1.7을 모두 사용해 보았습니다. 그러나 두 경우 모두 회전 후 이미지가 약간 커집니다. 이 문제를 어떻게 해결할 수 있습니까? 다음 코드와 함께 회전하고 있습니다 : 그것은 높이와 폭이 서로 다른 크기의 때문에 이미지가 직사각형 특히 회전 할 때

var test = 0; 
$('#working-area .rotatable').live('click', function(event) { 
    test = test + 90; 
    $(this).rotate({ 
     angle: test, 
     containment: "working-area" 
    }); 
}); 

Answer 1

이미지가 반드시 더 큰 공간을 차지합니다. 예를 들어, 8x4 크기의 종이를 옆으로 45도 회전시킵니다. 이제 종이가 이전 높이의 절반을 차지하고 이전 너비의 두 배가됩니다. 이제 22.5도 더 회전 시키면 높이가 3/4 더 커진다는 것을 알 수 있습니다.

보통 해결책은 이미지의 높이 또는 너비 중 더 높은 쪽을 사각 치수 봉쇄로 만든 다음 회전시 치수 변화를 수용 할 수 있도록 해당 값에 1/4을 더하는 것입니다.

Answer 2

<img src="images/tool_box/1.png" class="rotatable"> 이미지를 만들면 얻은 결과입니다.

당신은 이미지를 클릭

, 당신은 확실히이 플러그인이 일을한다

<span style="display: inline-block; width: 97px; height: 11px;" id="" class="rotatable"> 
    <canvas width="97" style="position: relative; left: -0.310859px; top: -43.3109px;" height="97"></canvas> 
</span> 

를 얻을. 나는 너를 도울 수 없어. 나는 당신 자신의 기능을 만들고 회귀를 해보는 것이 좋습니다.

<script src="jquery.js"></script> 
<script> 
    var imgcss = {"-webkit-transform":"rotate(-90deg)", "-moz-transform" : "rotate(-90deg)" }; 
    var imgcss1 = {"-webkit-transform":"rotate(0deg)", "-moz-transform" : "rotate(0deg)" }; 

    var flag = false; 

    $(function() 
    { 
     $('#img').live('click', function(event) {   
      if(flag == false){ 
       $(this).css(imgcss); 
       flag = true; 
      } 
      else{ 
       $(this).css(imgcss1); 
       flag = false; 
      } 
    }); 
    }) 
</script> 
<div id="working-area"> 
    <img src="img.jpg" id="img"/> 
</div>