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

使用css在列上设置背景图像

saveInPhotoGallery()

Answer 2

第一个选项，您可以在min-width:100%代码中设置img：

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

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

2 个答案: