Jquery 图像旋转时未在div内调整大小

在这里，我试图通过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>

$（函数（）{
$（“#右”）。单击（函数（）{
$（“#图像”）。旋转（{animateTo:90}）；
});
$（“#左”）。单击（函数（）{
$（“#图像”）。旋转（{animateTo:-90}）；
});
$（“#重置”）。单击（函数（）{
$（“#图像”）.rotate（{animateTo:0}）；
}); });
左右复位

试试这个

$(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%');
    });
});