0

如果您转到我正在处理的幻灯片，您可以看到如果您调整浏览器窗口的大小，图像会调整大小并正确移动。

...除非您使浏览器窗口的宽度小于某个量（我不知道是什么定义了该量），然后它会拉伸图像而不是缩放它。我怎样才能解决这个问题？

这是我的调整大小代码：

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

4 回答 4

2

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

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

于 2012-06-26T13:52:11.130 回答
1

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

于 2012-06-26T13:46:53.757 回答
0

我写的东西有效：

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

希望这可以帮助！

于 2012-06-26T13:56:24.577 回答
0

我稍微重写了您的示例以进行独立演示。

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

  1. 确保缓存任何 jQuery 对象。您不想重复获取项目，因为这会带来不必要的性能成本。
  2. 我的示例显示了在窗口的调整大小事件中发生的这种情况 - 我不确定您是如何设置的。对于生产来说，限制绑定到诸如窗口调整大小事件之类的事件非常重要，因为它们可以以浏览器可以管理的速度被触发，这可能会导致不良后果。请参阅John Resig 撰写的这篇出色的文章，当时这让 Twitter 有点头疼。

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

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

​</p>

于 2012-06-26T14:01:22.293 回答