圖像與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。

通常的解決辦法是使與高度或圖像中較高的寬度的方形尺寸遏制，然後四分之一添加到該值在旋轉時以適應尺寸的變化。

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>