当 img 高度小于窗口高度时，CSS 或 jQuery 可缩放背景图像下方没有空白答案

【问题标题】：CSS or jQuery scalable background image with NO white space underneath when img height is less than window height当 img 高度小于窗口高度时，CSS 或 jQuery 可缩放背景图像下方没有空白
【发布时间】：2011-07-01 15:50:33
【问题描述】：

我知道，老歌但好歌。这个问题被问了很多次，但我还没有一个明确的答案。可缩放的背景图片，最好只有 CSS，如果必须的话，愿意使用 jQuery 来支持。我经常遇到的一个问题（即使用 CSS3 背景图像）是当图像高度小于浏览器窗口高度时图像下方的空白空间。（例如：http://css-tricks.com/examples/ImageToBackgroundImage/）

这是我想要完成的：

保持纵横比
如果浏览器窗口小于图像大小，则剪辑图像高度和宽度
图像以页面为中心，因此剪辑不会偏移页面流

以下是说明这些目标的一些示例（尽管我认为可以做得更好）：

谢谢，谢谢，谢谢。

【问题讨论】：

听起来像这样必须用 javascript/jQuery 来完成。

标签： jquery css image background scalable

【解决方案1】：

朋友推荐 Supersize - 这正是我想要的！使用核心功能而不是幻灯片版本。 http://www.buildinternet.com/project/supersized/

【讨论】：

【解决方案2】：

你见过https://github.com/weightshift/The-Personal-Page吗？

它使用了backstretch jQuery 插件，可以很好地完成这项工作。

【讨论】：

【解决方案3】：

css:

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

html:

<div id="wallpaper"><img src="bg.jpg"></div>

【讨论】：

【解决方案4】：

给你。使用 jQuery。使用position:absolute; z-indez:0; 将IMG 标签设置为背景图像当您调整窗口大小时，图像将相应地调整大小。跨浏览器兼容。

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})

在http://jsfiddle.net/LBvjR/查看工作示例

【讨论】：

不保持纵横比
@daniel 图像方面取决于您如何调整窗口大小。图像不能具有 100% 的宽度和高度并且仍保持纵横比。如果您将窗口大小调整为 100 像素宽 x 600 像素高会发生什么。如何宽度为 100 像素，高度为 100% 并且仍然保持纵横比。根据您的要求，我们正在扩展 img 以适应 100% 的窗口宽度和高度，没有任何空间
我希望图像保留其原始纵横比并在最小尺寸后开始剪切图像。这是一个例子，但剪裁到左上角：nooshu.com/explore/scalable-background 我想让它剪裁到图像的中心。可能吗？
@Daneil，为了让它保持你的 thakoon 链接中的纵横比，我们可以将高度设置为 100%。宽度会有所不同。在这种情况下不需要javascript..检查jsfiddle.net/LBvjR/2。这将使图像随着窗口高度的变化而缩放并保持纵横比。

【解决方案5】：

你可以使用类似的东西：

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

但它存在浏览器不兼容问题。

.
替代解决方案将迫使您使用 HTML。

例子：

【讨论】：

不过要小心。 background-size 属性仅适用于 Safari/Chrome 和 Opera。对于 FF，您需要-moz-background-size。
这是我提到的浏览器不兼容问题之一。