圖像不旋轉div內的旋轉

Question

這裏我試圖通過jquery旋轉一個圖像，但是我面臨的問題是，當我向左或向右旋轉圖像的某些部分將從框架中移出。它不是基於CSS屬性來調整大小;最大高度：100％;最大寬度：100％;並且該框架具有固定的寬度和自動高度。

$(function(){ 
$("#right").click(function(){ 
    $("#image").rotate({ animateTo:90 }); 
}); 

$("#left").click(function(){ 
    $("#image").rotate({ animateTo:-90 }); 
}); 
$("#reset").click(function(){ 
    $("#image").rotate({ animateTo:0 }); 
}); }); 

<button id="right">Right</button><button id="left">Left</button><button id="reset">Reset</button><div class="previewimg"><img src="http://twistedsifter.files.wordpress.com/2010/03/shipwreck-beach-zakynthos-vertical-panorama-greece.jpg" id="image"></div> 

Jsfiddle

Answer 1

試試這個

$(function() { 
    $("#right").click(function() { 
     $("#image").rotate({ 
      animateTo: 90 
     }); 
     $("#image").css("height", '268px'); 
    }); 
    $("#left").click(function() { 
     $("#image").rotate({ 
      animateTo: -90 
     }); 
     $("#image").css("height", '268px'); 
    }); 
    $("#reset").click(function() { 
     $("#image").rotate({ 
      animateTo: 0 
     }); 
     $("#image").css("height", '100%'); 
    }); 
});