I am currently attempting to use jQuery to rotate an image, but I am facing an issue. When I rotate the image left or right, a portion of it extends beyond the frame. The image is not resizing based on the CSS properties set as max-height: 100%; max-width: 100%; with a fixed width and auto height for this frame.
$(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>