Question

基于推荐（“css only technique number 1”here http://css-tricks.com/perfect-full-page-background-image/），我使用内联img元素和css来制作一个填充整个浏览器窗口的背景图像。

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

例如，这个jfiddle ......如果你移动浏览器你可以看到蜂蜜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

您可以将背景图像应用于div （或根据浏览器边框延伸的任何其他容器），而不是使用img元素。

然后，您为后台执行以下操作：

.picture {
    background-image: url(...);

    background-size:cover; /* this way */
    background-size:content; /* or this one (which you prefer) */
}

...根据容器尺寸拉伸图像。

修改

此外，在这种情况下：

html, body { width:100%; height:100%; margin:0; padding:0; } .container-fluid { min-width:100%; min-height:100%; background-position:center; }

（但这是一个例子 - 你应该自己使用你的布局）。

Answer 2

我强烈建议使用帖子中首先介绍的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;
}

水平压缩的背景图像

2 个答案: