Question

我试图在用户向下滚动时缩放图像。

它工作正常，但我遇到的问题是它没有保持良好的比例。我的意思是我的图像宽212像素，高800像素。在缩放比例是滚动像它是一个方形图像....

这是我的Jsfiddle，我认为这会更加敏感。 ..

任何帮助都会非常棒：）

<img src="http://i57.tinypic.com/2d9v77d.png"">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

的CSS：

img {
    position: fixed;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
}

$(window).on("scroll", function() {
    var s = Math.min(400, $(document).scrollTop()) + 100;
    $("img").width(s).height(s);
});

Answer 1

$(function() {
    var width = $('img').width();
    var height = $('img').height();

    //set width,height to 0 now in order to get real width and height
    $('img').width(0).height(0);

    var ratio = width/height;


$(window).on("scroll", function() {

    console.log(ratio);
    var w = $(document).scrollTop();    
        $("img").width(w*ratio).height(w)
});

});

滚动时缩放图像（保持良好比例）

1 个答案: