html - 在父容器 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 .