缩放背景图像以使用居中和纵横比填充浏览器窗口

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