javascript - "full-window"幻灯片图片拉伸(stretch)错误

Question

如果你去看我正在制作的幻灯片 here ，您可以看到，如果您调整浏览器窗口的大小，图像会正确调整大小和移动。

...除非您使浏览器窗口的宽度小于一定量(我不知道是什么定义了该量)，然后它会拉伸(stretch)图像而不是缩放图像。我该如何解决这个问题？

这是我的调整大小代码:

winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
    $('#curImg img').css({width:winWidth});
    imgWidth = winWidth;
    imgHeight = $('#curImg img').height();
    $("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
    $("#curImg").css({height: winHeight + "px"});
}else{
    $('#curImg img').css({height:winHeight});
    imgHeight = winHeight;
    imgWidth = $('#curImg img').width();
    $("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
    $("#curImg").css({width: winWidth + "px"});
}

Answer 1

您还可以查看这个 jQuery 插件: http://srobbin.com/jquery-plugins/backstretch/

或着眼于多种解决方案的 CSS 技巧: http://css-tricks.com/perfect-full-page-background-image/