整页背景图像可调整大小 - 保持纵横比答案

【问题标题】：full page background image resizable - maintain aspect-ratio整页背景图像可调整大小 - 保持纵横比
【发布时间】：2011-10-14 17:47:28
【问题描述】：

我需要一个简单的 jquery 解决方案来将背景图像添加到我的页面中，完全填充它，但保持纵横比和垂直和水平居中位置。

这里有几个插件，但我不想使用任何插件。

提前致谢。

【问题讨论】：

您知道，如果页面很长，则图像将无法识别，因为您要保持纵横比，从而使图像变得非常宽。
我的页面没有向下或向右滚动，它固定在浏览器窗口中。所有内容都在窗口范围内。

标签： jquery image background

【解决方案1】：

这段代码会做你想做的事..

$(function(){

    var stretcher = $('#background-container > img'),
        element = stretcher[0],
        currentSize = { width: 0, height: 0 },
        $document = $(document);

    $(window).resize(function () {
        var w = $document.width();
        var h = $document.height();

        if (currentSize.width != w || currentSize.height != h) {
            stretcher.width(w).height('auto');
            if (h > element.height) {
                stretcher.width('auto').height(h);
            }
            currentSize.width = w;
            currentSize.height = element.width;
        }
    })

    $(window).load(function () {
        $(this).trigger('resize');
    });

});

像这样设置你的 HTML

<div id="page">
    Your page contents here..
</div>
<div id="background-container">
      <img src="path/to/image" />
</div>

和你的 CSS 喜欢

#background-container{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

#page{
    position:relative;
    z-index:5;
}

演示地址 http://jsfiddle.net/gaby/3YLQf/

【讨论】：

@Gaby，正在工作，谢谢，但图像不会从某个点变小，比如 800x600，图像不再缩小。
@Emilio，如果你想让它在窗口小于你的内容时也能缩放，那么将$document = $(document);更改为$document = $(window);
现在我需要将它应用到一个 ajaxed 图像上，很抱歉打扰你，在此先感谢
你是什么意思？你从脚本动态加载图像？如果是这样，您将需要取消绑定调整大小处理程序，并再次运行整个脚本加载图像后（在图像的加载处理程序上）

【解决方案2】：

或者你可以使用 CSS 属性：

background-size: cover

这将缩放图像，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。

您可以使用background-position 属性控制图像在视口中的对齐方式

【讨论】：

还有办法让图片居中吗？
background-position : 50% 50% 会做到的。