6

我正在尝试使用具有多个全角背景图像的 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;*/
    }

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

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

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

4

1 回答 1

2

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

例子：

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

现场示例

于 2013-12-21T21:27:37.180 回答