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

Question

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

它工作正常，但我遇到的问题是它没有保持良好的比例。我的意思是我的图像是 212 像素宽 x 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)
});

});

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

scale image when scroll ( Keeping good proportion)

jquery

scroll

scale