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