缩放背景图像以填充具有居中和宽高比的浏览器窗口

Question

我知道有很多关于这方面的信息，但我已经搜索过并且仍然找不到我需要的帮助。

基本上我正在尝试使用背景图像填充整个浏览器窗口，该背景图像可以自动缩放并自动保留任何大小的宽高比​​，以便可以在任何设备上查看。

以下是我想要实现的一个很好的例子：

http://www.comme-des-garcons.com/rawvision.html

背景图片，当尺寸为320x480，然后从480扩展到640时会向右扩展！

如果那里的任何人都可以通过CSS了解如何实现这一目标我将非常感激！

Answer 1

您可以使用新的CSS3属性background-size: cover

来实现此目的

你可以用我创建的小提琴http://fiddle.jshell.net/rxMbe/

看到它

示例：

body{
  background-image: url(splash.jpg);
  background-size: cover;
}

所有主流浏览器都广泛支持它，使用安全：http://caniuse.com/background-img-opts

Answer 2

您可以通过将min-width和min-height提供给100％

来实现此目的

将此图像包装在div中。

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

这里应该是CSS。

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}