图像不旋转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%'); 
    }); 
});