Question

如果您使用幻灯片演示我正在here，您可以看到，如果您调整浏览器窗口的大小，图片会调整大小并正确移动。

...除非你使浏览器窗口的宽度小于一定量（我无法确定定义该数量的是什么），然后它会拉伸图像而不是缩放它。我该如何解决这个问题？

这是我的调整大小代码：

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/

Answer 2

您应该查看background-size属性，尤其是cover值

Answer 3

我写的东西有效：

//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height

    iRatio = iWidth/iHeight;
    wRatio = oWidth/oHeight;

    if(iRatio<wRatio){
        imageWidth = oWidth;
        imageHeight = Math.ceil(iHeight*(oWidth/iWidth));

    }
    else{
        imageHeight = oHeight;
        imageWidth = Math.ceil(iWidth*(oHeight/iHeight));

    }

    $('#backgroundResizeImage').css({ 
        'height': imageHeight,
        'width': imageWidth
    });

希望这有帮助！

Answer 4

我重写了你的例子，做了一个独立的演示。

与你的问题无关的两个注释。

确保缓存任何jQuery对象。您不想重复获取项目，因为这会带来不必要的性能成本。
我的例子在窗口的resize事件中显示了这种情况 - 我不确定你是如何设置它的。对于生产，限制绑定到窗口大小调整事件等事件的事件非常重要，因为它们可以像浏览器管理的那样快速地触发，这可能导致不良后果。请点击Twitter上的this excellent article by John Resig一段时间。

最大的相关变化是我改变了设置图像高度和宽度的方式，具体取决于它们的比例与窗口的比较。我认为这种方式更清晰，但这是主观的。但它确实有效！

http://jsfiddle.net/L4k3s/2/

var $window = $(window),
    $img = $('img'),
    imgRatio = $img.width() / $img.height();

$window.on('resize', function (event) {
    var imgWidth = $img.width(),
        imgHeight = $img.height(),
        winWidth = $window.width(),
        winHeight = $window.height(),
        ratio = winWidth / winHeight;

    // The image is wider than the window
    if (ratio < imgRatio) {
        $img.width(winWidth);
        $img.height(winWidth / imgRatio);
        $img.css({
            left: 0,
            top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
        });
    // The image is taller than the window
    } else {
        $img.width(winHeight * imgRatio);
        $img.height(winHeight);
        $img.css({
            left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
            top: 0
        });
    }
});

“全窗”幻灯片图片拉伸bug

4 个答案: