Question

我正在使用jQuery在悬停图像时动画图像。我需要它能够通过浏览器重新调整大小/缩放。问题是我无法溢出：隐藏起作用，因为我的div上没有固定的高度。我希望宽度为100％，我需要高度为div宽度的50％。请帮忙

链接到我的示例 http://www.jasalounge.com/tester/

    $(function(){
        $("#box1 a").hover(function(){
            $("img", this).stop().animate({top:"-50%"},{queue:false,duration:150});
        }, function() {
            $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
        });
    });


#box1 {
    width:100%;
    max-width:250px;
    border:none;
    overflow:hidden;


}
#box1 img {
    width:100%;
    position:relative;

}



     <div id="box1"><a href="#"><img src="images/test3.png" alt="test"/></a></div>

Answer 1

将您的动画功能更改为

$(function(){
    $("#box2 a").hover(function(){
        $("img", this).stop().animate({top:"-" + $("img", this).height() / 2 +"px"},{queue:false,duration:150});
    }, function() {
        $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
    });
});

将css更改为

#box2_wrapper{
    width:30%;
}
#box2 {
    overflow:hidden;
    border:none;
    height:0;
    padding-bottom: 90%;
}

#box2 img {
    width:100%;
    position:relative;
}

和html到

<div id="box2_wrapper">         
    <div id="box2">  
        <a href="#"><img style="top: 0px;" src="test_files/test3.png" alt="test"></a>
    </div>
</div>

这会将您的box div包装在一个包装中，您可以根据需要调整大小。在这种情况下，box2然后变成具有10：9纵横比的盒子，因为填充底部90％是包装物宽度的90％。它是90％，因为你的图像的宽高比为10:18，你想一次显示一半。

Maintain the aspect ratio of a div with CSS

和

Keep div height relevant to aspect ratio

解释这样做的技巧

Jquery悬停动画缩放浏览器窗口上的缩放

1 个答案: