Html div全宽响应背景图像

我想知道如何在一个div中制作一个全宽的背景图像。背景图像在页面宽度上扩展（并且是响应性的），但图像的高度不是其全高。似乎不知怎么的它被切断了。我使用的是bootstrap框架，我之所以尝试这样做，是因为我想在图像上覆盖一些文本。我试过很多不同的方法，但似乎都没办法解决，救命啊

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }

这是一些文本
.bg图像{
背景：url（img/image.jpg）无重复中心顶部；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
最大高度：450像素；
}

以下是获得所需设计的一种方法

从以下HTML开始：

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

这是怎么回事 图像被设置为宽度为100%的常规流内容，因此它将根据父容器的宽度自行调整。但是，您希望高度不超过450px，这对应于1200px的图像宽度，因此将图像的最大宽度设置为1200px。您可以使用

display:block

和

margin:0 auto

使图像居中

文本通过使用绝对定位绘制在图像上。在最简单的情况下，我将

h1

元素拉伸为父元素的全宽，并使用

text align:center

使文本居中。使用顶部或底部偏移将文本放置在需要的位置

如果您的横幅图像的纵横比有所不同，则需要使用jQuery/Javascript动态调整

.bg image img

的最大宽度值，但除此之外，这种方法还有很多优点

---

使用

背景尺寸：cover

时，背景图像将自动拉伸以覆盖整个容器。但是，纵横比会保持不变，因此您将始终丢失部分图像，除非图像的纵横比与其应用的元素相同

我认为有两种方法可以解决这个问题：

• 不要通过设置来保持图像的纵横比

  背景大小：100%100%

  这也将使图像覆盖 整个容器，但不会保持该比率。缺点 这会扭曲你的形象，因此看起来很奇怪， 取决于图像。根据你在小提琴中使用的图像，我 不过我觉得你能逃脱惩罚

• 您还可以基于javascript计算并设置元素的高度 在它的宽度上，所以它得到与图像相同的比率。这 必须在加载和调整大小时进行计算。应该是 只需几行代码就足够简单了（请随意询问您是否需要 示例）。这种方法的缺点是宽度可能会变宽 非常小（在移动设备上），因此为计算高度 此外，这可能会导致容器内容溢出。这 也可以通过更改内容的大小或 有些东西，但它增加了解决方案的复杂性/

---

我也在爱奥尼亚混合应用程序背景中尝试了这种风格。这也是有风格的背景模糊效果

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

---

}

你能简单解释一下你的期望吗？嗨，德鲁，欢迎来到SO！

.bg image

的高度由子元素的内容决定，在本例中为

h1

文本。您需要为

.bg image

指定某种类型的最小高度。你能详细说明一下你想做什么吗？谢谢谢谢你，马克！基本上，我正在尝试将.bg图像设置为页面顶部的一个区域，该区域将扩展整个宽度，并将页面标题包含在其中并居中。这是一个提琴：这是一个更好的提琴抱歉，所以你想看到所有的背景图像，并让它填充页面的最大宽度，但图像的高度限制为450像素。最后，你想在图片上放置一些文字（简单标题还是更多？）谢谢你的回答，这更是我想要的，背景被剪掉了/没有显示图片的完整高度