jquery - 旋转时图像未在 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>

提琴手

Answer 1

Try this

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