Html div 全宽中的响应式背景图像

Responsive background image in div full width

提问by Drew

I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's being cut-off somehow. I'm using bootstrap framework, and the reason I'm trying to do this is I want to overlay some text on the image. I've tried so many different things but cant seem to figure it out, help!

我试图弄清楚如何在 div 全宽和响应中制作背景图像。背景图像在整个页面的宽度上扩展（并且是响应式的），但图像的高度不是它的全高。它似乎以某种方式被切断了。我正在使用引导程序框架，我尝试这样做的原因是我想在图像上覆盖一些文本。我尝试了很多不同的东西，但似乎无法弄清楚，帮助！

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

回答by Marc Audet

Here is one way of getting the design that you want.

这是获得您想要的设计的一种方法。

Start with the following HTML:

从以下 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>

Note that the background image is now part of the regular flow of the document.

请注意，背景图像现在是文档常规流程的一部分。

Apply the following CSS:

应用以下 CSS：

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

How This Works

这是如何工作的

The image is set an regular flow content with a width of 100%, so it will adjust itself responsively to the width of the parent container. However, you want the height to be no more than 450px, which corresponds to the image width of 1200px, so set the maximum width of the image to 1200px. You can keep the image centered by using display: blockand margin: 0 auto.

图像被设置为宽度为 100% 的常规流内容，因此它会根据父容器的宽度进行自我调整。但是你希望高度不超过450px，对应1200px的图片宽度，所以设置图片的最大宽度为1200px。您可以使用display: block和保持图像居中margin: 0 auto。

The text is painted over the image by using absolute positioning. In the simplest case, I stretch the h1element to be the full width of the parent and use text-align: centerto center the text. Use the top or bottom offsets to place the text where it is needed.

文本通过使用绝对定位绘制在图像上。在最简单的情况下，我将h1元素拉伸到父元素的全宽，并用于text-align: center将文本居中。使用顶部或底部偏移将文本放置在需要的位置。

If your banner images are going to vary in aspect ratio, you will need to adjust the maximum width value for .bg-image imgdynamically using jQuery/Javascript, but otherwise, this approach has a lot to offer.

如果您的横幅图像的纵横比会发生变化，您将需要.bg-image img使用 jQuery/Javascript 动态调整最大宽度值，但除此之外，这种方法有很多优点。

See demo at: http://jsfiddle.net/audetwebdesign/EGgaN/

见演示：http: //jsfiddle.net/audetwebdesign/EGgaN/

回答by Pevara

When you use background-size: coverthe background image will automatically be stretched to cover the entire container. Aspect ratio is maintained however, so you will always lose part of the image, unless the aspect ratio of the image and the element it is applied to are identical.

当您使用background-size: cover背景图像时，会自动拉伸以覆盖整个容器。然而，纵横比保持不变，因此您将始终丢失图像的一部分，除非图像的纵横比与其应用的元素相同。

I see two ways you could solve this:

我看到有两种方法可以解决这个问题：

• Do not maintain the aspect ratioof the image by setting background-size: 100% 100%This will also make the image cover the entire container, but the ratio will not be maintained. Disadvantage is that this distorts your image, and therefore may look very weird, depending on the image. With the image you are using in the fiddle, I think you could get away with it though.

• You could also calculate and set the height of the element with javascript, based on its width, so it gets the same ratio as the image. This calculation would have to be done on load and on resize. It should be easy enough with a few lines of code (feel free to ask if you want an example). Disadvantage of this method is that your width may become very small (on mobile devices), and therfore the calculated height also, which may cause the content of the container to overflow. This could be solved by changing the size of the content as well or something, but it adds some complexity to the solution/

• 不要通过设置来 保持图片的纵横比background-size: 100% 100%这也会使图片覆盖整个容器，但不会保持比例。缺点是这会扭曲您的图像，因此可能看起来很奇怪，具体取决于图像。使用您在小提琴中使用的图像，我认为您可以摆脱它。

• 您还可以使用 javascript 计算和设置元素的高度，基于其宽度，因此它获得与图像相同的比例。这个计算必须在加载和调整大小时完成。用几行代码应该很容易（如果你想要一个例子，请随意询问）。这种方法的缺点是你的宽度可能会变得非常小（在移动设备上），因此计算出的高度也可能会导致容器的内容溢出。这可以通过更改内容的大小或其他方式来解决，但它增加了解决方案的一些复杂性/

回答by Code Spy

I also tried this style for ionic hybrid app background. this is also having style for background blur effect.

我也为 ionic 混合应用程序背景尝试了这种风格。这也有背景模糊效果的风格。

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

}

}