1

jQueryを使用して、ホバリング中に画像をアニメーション化しています。ブラウザでサイズ変更/スケーリングできるようにする必要があります。問題は、div の高さが固定されていないため、overflow:hidden が機能しないことです。幅を 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>
4

1 に答える 1

0

アニメーション機能を次のように変更します

$(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>

これにより、必要に応じてサイズを変更できるラッパーでボックス div がラップされます。この場合の box2 は、padding-bottom 90% がラッパーの幅の 90% であるため、アスペクト比が 10:9 のボックスになります。画像の縦横比が 10:18 で、一度に半分ずつ表示したいので、90% です。

CSS で div の縦横比を維持する

と

縦横比に関連する div の高さを維持する

これを行うためのテクニックを説明する

于 2013-08-18T09:48:54.140 に答える