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

Question

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

它工作正常，但我遇到的问题是它不保持良好的比例。我的意思是我的图像是212像素宽度×800像素高度。在规模上滚动像它是一个方形图像..。

这是我的Jsfiddle，它会让我感觉更灵敏。 ..

任何帮助将是非常了不起:)

http://jsfiddle.net/mw73enz8/6/

<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) 
}); 

});