Bootstrap/flexbox卡:在桌面上将图像移动到左/右侧

Question

我正在尝试使用启用了Flexbox的Bootstrap 4构建以下卡布局.图片取自我当前的实现,它的工作方式与预期的一样.

HTML结构如下:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

现在,当我扩展到更大的屏幕时,我得到了以下输出(这是预期的Bootstrap但不想要一个):

我想要看到的是:

所以我的问题是,我如何才能正确实现这种布局？我正在使用flex-box,因此Bootstrap列(col-*)总是相同的高度,这正是我想要的.但我应该删除两列之间的填充,然后使两列内容总是覆盖父高度的100%,最后确保图片保持它的纵横比,所以它应该像我在示例中那样从中心裁剪.

我用谷歌搜索并尝试了许多不同的解决方案,但所有这些解决方案似乎都过于复杂或"hacky".所以我想知道没有简单的方法来实现这种布局......？

注意:解决方案不必与Bootstrap相关,对于这类问题的一般解决方案甚至更好.

Answer 1

我找到了一种方法,使用background-size:cover.我必须使用div而不是img,否则这个解决方案有效,在我的情况下,img不是那么必要.其他解决方案仍然受欢迎.

我稍微修改了我的html:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

对于card-img-bottom,我设置了样式:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

在桌面视图中,我将高度更改为100%,因此高度始终与卡块的高度相同.

由于Bootstrap默认填充,桌面视图中的card-block和card-img-bottom之间仍然存在一些额外的填充.因此,白色区域略大于图像.对我来说,这不是问题所以我没有删除它们.