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

Question

我已经发现了一些关于这个主题的问题，但其中 none 确实可以帮助我解决我的问题。

我喜欢构建一个简单的 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

使用css设置列的背景图片

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

Answer 2

第一个选项，你可以在你的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;
}