Bootstrap 3 和响应式背景图像？答案

【问题标题】：Bootstrap 3 and Responsive Background Images?Bootstrap 3 和响应式背景图像？
【发布时间】：2013-09-19 14:08:53
【问题描述】：

我正在尝试使用具有多个全角背景图像的 Bootstrap 创建一个响应式网站。

这是它的外观模型：

这个想法是让每个图像拉伸到浏览器窗口的宽度，然后相应地缩放高度以保持纵横比。

我已经建立了一个 JSFiddle 我现在所拥有的：

http://jsfiddle.net/SeFVV/

目前，我有多个<section> 标签，我正在为每个标签设置一个带有background-size: cover 的背景图片：

    #first {
        background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-height: 800px;
        /*height: 800px;*/
        /*padding-bottom: 200px;*/
    }

作为一个 hack，我为每个设置最小宽度，所以它不是真正响应。

如果我不设置最小高度，那么每个都只是缩小以适应里面的元素，这不是我想要的。

在上一个问题中，建议使用多个 Bootstrap 容器的答案 - 您是否打算正常拥有多个容器 div？此外，该答案并没有真正涵盖如何使其具有响应性，以便宽度适合，并且高度会缩放以保持纵横比。

【问题讨论】：

可能重复：stackoverflow.com/questions/18671572/…
@mb21 - 这个问题的不同之处在于，我实际上希望它具有响应性（即宽度应该适合屏幕，高度应该缩放以保持图像的纵横比）。
我不知道这是否可能。也许您最好的选择是创建该图像的多种尺寸并播放媒体查询，这并不容易而且不是“自动”的，但这种方式会奏效。
如果你想根据背景图片调整容器的高度，那么你需要使用 javascript。我建议看看backstretch 或any stretch。或者为您的每个区域设置一个类 .section 并更新媒体查询中的最小高度。保持这些尺寸一致可能是有利的。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

您可以通过添加到您的 html 和 100% 的正文标记高度以及页面的部分标记（您要拉伸背景图像的位置）来使用窗口的动态高度。

例子：

html,body,section{height:100%;}

Live Example

【讨论】：