html - 水平压缩的背景图像

Question

根据建议(此处为“css only technique number 1”http://css-tricks.com/perfect-full-page-background-image/)，我使用内联 img 元素和 css 制作背景图像，以填充整个浏览器窗口。

一切正常，除了在一定宽度的窗口下，当图像调整大小时它开始水平压缩图像，换句话说，不保持图像的纵横比。

例如，这个 jfiddle...如果您四处移动浏览器，您会看到 honey boo boo 的宽高比没有保留。

http://jsfiddle.net/4040newb/h7QMv/2/

  <div class="container-fluid">
    <a href="gallery.html">
    <img  src="http://thenypost.files.wordpress.com/2013/09/tv-honey_boo_boo.jpg" class="bg "/>
    </a>
  </div><!-- .container -->

Answer 1

我强烈推荐使用帖子中首先描述的 CSS3 方法 - 这是一种更简单、更可靠的方法:

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}