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;
}

Answer 2

使用css设置柱子上的背景图片

 <div class="row">
    <div class="col-sm-4" style="background-image:url('.....')">
      content......
     </div>