在父容器引导程序中填充图像

Question

我有一张1920 x 1300的横幅图片，我希望在容器或 jumbotron中显示800px高度。

我如何使图像适合它，以便它也具有响应性，它的文字也是如此？

<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。