css - Bootstrap 中 col-*-* 的全尺寸背景图片

Question

我已经发现了一些关于这个主题的问题，但没有一个能真正帮助我解决我的问题。

我喜欢构建一个简单的 Bootstrap 网格，如下所示:

<div class="container-fluid"> 
  <div class="row">
    <div class="col-sm-8"> Some Text </div>
    <div class="col-sm-4">
      <img src="..." alt="Full Size Background Image" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <img src="..." alt="Full Size Background Image" />
    </div>
    <div class="col-sm-8"> Some Text </div>
  </div>
</div>

col-sm-4-DIV 应包含全尺寸背景图像，其高度与文本相同且无填充。

这是我的意思的照片。我想让背景图片覆盖红色区域:

See Example

有什么办法吗？

非常感谢您的帮助!!!

Answer 1

第一个选项，你可以在你的img标签中设置min-width:100%:

img {
    min-width: 100%;
}

或者第二个选项，你可以将图片设置为背景，然后设置在你想要的div中:

<div class="col-sm-4 full-img">

还有CSS:

.full-img {
    background-image: url("....");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}