0

根据建议（此处为“仅 css 技术编号 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 -->

4

2 回答 2

1

除了使用 img 元素，您只需将背景图像应用到 div（或任何其他根据浏览器边框拉伸的容器）。

然后，您对背景执行以下操作：

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

（但这是一个例子——你应该自己玩你的布局）。

于 2013-11-14T02:55:31.510 回答
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;
}
于 2013-11-14T02:57:20.803 回答