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

【问题标题】：Fill image in parent container bootstrap在父容器引导程序中填充图像
【发布时间】：2016-04-18 02:12:54
【问题描述】：

我有一个 1920 x 1300 的横幅图像，我想在容器或 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%;
}

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

【问题讨论】：

可能只有我一个人，但我无法真正理解您要达到的目标。您能否提供一个 JSFiddle 或 codepen 来处理您的代码，并详细描述所需的结果。
你确定图片路径正确吗？或网址（../images/background.jpg）？

标签： html css twitter-bootstrap background background-image

【解决方案1】：

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

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

设置<div class="image-container">内部的内容并设置为绝对值。

这里是JSFiddle。

【讨论】：