全屏背景图像调整大小

Question

我正在尝试将背景图像设置为全屏，而在窗口上调整图像大小不会改变实际像素大小，但会变小（类似裁剪）。

这就是我的意思:(尝试调整窗口大小并注意图片变小或变大但不会像素化）http://jsfiddle.net/G7Qc4/

现在，上面的工作是因为图像是div的背景，我设置了：

background-position: center top;

如果它只是简单<img>它不起作用，我的问题是如何让它工作？如果有办法吗？

我正在使用nivoSlider，它不接受div的图像，所以我将不得不使用<img>。

非常感谢

Answer 1

如果我理解，您希望使用实际标签作为背景而不是背景图像。

这是我的解决方案： http://jsfiddle.net/ttZeM/

需要知道背景图像的尺寸。

有一个div保持背景绝对定位，网站内容绝对位于它之上。

为了使背景图像居中，我向左移动了-500px，这是它宽度的一半。它位于一个宽度为0px的div内部，以position:absolute; left:50%为中心，这是一种奇怪的技术，但如果您知道图像大小，它就可以工作。

另请注意，bg_wrap div有溢出：隐藏;宽度：100％;这意味着您不会在屏幕边缘看到滚动条。

我希望这就是你所追求的！

Answer 2

可以使用CSS3（background-size: cover）完成，如下所示：http://jsfiddle.net/mqchen/Kq3pa/