使用 CSS 引导背景图像答案

【问题标题】：Bootstrap background-image with CSS使用 CSS 引导背景图像
【发布时间】：2016-11-02 04:04:46
【问题描述】：

在引导程序中，我可以使用 class=img-responsive 来确保我的图像完全显示而不会被裁剪。如何在我的 CSS 样式表中实现这个“class=img-responsive”，以便我的背景图片能够完全显示？

这是我的 HTML 文件

<header class="bgimage">
  <div class="container">
    <h1>Headline</h1>  
  </div>
</header>

这是我的 CSS 样式表。

.bgimage {
  background-image: url('../images/tara1.jpg');
  background-position: center center;
  background-size: cover;
  height: 200px;
}

【问题讨论】：

【解决方案1】：

我会尝试以下方法：

.bgimage{
  background-image: url('../images/tara1.jpg');
  background-size:100% 100%;
  background-repeat: no-repeat;
  height: 200px;
}

考虑设置宽度，否则我认为百分比不起作用:)

【讨论】：