Question

我需要布置一个包含两个图像的网页，这两个图像必须拉伸以填充可用的浏览器窗口，但文本内容位于页面的中心。到目前为止，我似乎能够做到这一点的唯一方法是，a）将两个图像合并为一个，并将其设置为body的背景图像，然后小心地垂直定位内容的中间带以适合图像之间的差距，或者，b）将container（固定）div嵌套在保持图像的container-fluid内，并固定保存文本内容。然而，我看到了那些主张嵌套自举容器的人的可怕警告和蔑视。

此图片可能有助于传达我的需求：

enter image description here

＆＃39;图片1＆＃39;必须在整个窗口上伸展，内容保持居中，与图像2相同，图像之间垂直为白色，在底部屏幕右侧有一条灰色的带状

Answer 1

你可以试试这个。

请注意，您必须根据设计需要应用一些自定义css。按照示例：

.container-fluid {
  padding: 0;
}
.container-fluid.wrapper {
  padding-top: 100px;
}
.ht33 {
  height: 200px;
}
.container.content {
  width: 970px;
  position: absolute;
  height: 800px;
  background: gray;
  color: #fff;
  top: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
  <div class="container content"></div>
  <div class="container-fluid bg-primary ht33"></div>
  <div class="container-fluid bg-warning ht33"></div>
  <div class="container-fluid bg-danger ht33"></div>
</div>

Screenshot

Answer 2

我在BG上使用了row类来对它们有网格感觉并消除了填充。

<强> HTML

<div class="container-fluid wrapper">
    <div class="container content bg-primary"></div>
    <div class="row bg-success bg"></div>        
    <div class="row bg-warning bg"></div>        
    <div class="row bg-danger bg"></div>        
</div>

<强> CSS

.container-fluid.wrapper {
    padding-top: 100px;
}
.bg {
    height: 200px;
}
.container.content {
    width: 970px;
    position: absolute;
    height: 800px;
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Answer 3

您可以尝试这样做：

http://jsfiddle.net/kqoonr24/1/

您可能需要调整它以满足您的需求，但这是基本的想法。 :-)

基本上，您希望拥有一个充当背景的div，并容纳构成每个背景元素的各个div。

然后，在那之后，你想要一个包含实际内容的前景div。

＆＃13;

html,
body,
.wrapper,
.foreground,
.background {
  height: 100%;
  width: 100%;
}
.foreground {
  background-color: green;
  max-width: 400px;
  margin: 0 auto;
}
.background {
  position: absolute;
  z-index: -1;
}
.background > * {
  height: 33%;
  content: '';
}
.background-element-1 {
  background-color: blue;
}
.background-element-2 {
  background-color: red;
}
.background-element-3 {
  background-color: orange;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<body>
  <div class="wrapper">
    <div class="background">
      <div class="background-element-1"></div>
      <div class="background-element-2"></div>
      <div class="background-element-3"></div>
    </div>
    <div class="foreground">
      <div class="foreground-inner">
        I am your text!
      </div>
    </div>
  </div>
</body>

＆＃13;

您可能需要调整它，因为我做了很多假设 - 如果您需要更多帮助，请告诉我。

Answer 4

我想到的最简单的例子，我假设你不知道背景图像的大小，这就是为什么我把它们放在不影响页面流的背景div中，而最重要的是自然内容

Demo

<div class="images-wrapper">
    <img src="..." alt="">
    <img src="..." alt="">  
</div>

<div class="container">
      .......
</div> <!-- /container -->

body {
    background:#ccc;
}
.images-wrapper {
    position:absolute;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:0;
}
.images-wrapper img {
    display:block;
    width:100%;
    height:auto;
    margin-top:30px;
}

.container {
    z-index:2;
    position:relative;
    background:#fff;
}

使用Bootstrap拉伸图像和居中内容

4 个答案: