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

Question

这里我试图通过 jquery 旋转一个图像，但我面临的问题是，当我向左或向右旋转时，图像的某些部分超出了框架。它没有根据 css 调整大小属性(property);最大高度: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%');
    });
});