在父容器中填充图像 bootstrap

Question

我有一个 1920 x 1300 的横幅图片，我想在容器中显示或 800 像素高度的超大屏幕。

我怎样才能适应图像，使其也具有响应性，并且文本在其上方？

<div class="container-fluid>
  <div class="image-container">
    <h1>Title</h1>
  </div>
</div>

CSS:

.image-container{
  background-image: url("..images/background.jpg");
  background-size: contain;
  height:800px;
  width: 100%;
}

或者重新调整图像大小会更好吗？

Answer 1

我建议使用 html <img> 而不是 css 背景。

我已经制作了一个 JSFiddle，说明我将如何做到这一点。

设置<div class="image-container">里面的内容，设置成绝对的

这里是 JSFiddle.

在父容器中填充图像 bootstrap

Fill image in parent container bootstrap

html

css

background

background-image

twitter-bootstrap