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＆＃34;解决方案。所以我想知道没有简单的方法来实现这种布局......？

注意：解决方案不必与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之间仍有一些额外的填充。因此，白色区域略大于图像。对我而言，这不是问题所以我没有删除它们。

Answer 2

我发现一个解决方案，我的图像高度有问题，但那是另一个问题......：P

好吧，重新发明已经准备好的东西的一个大问题是，当我们需要原始功能时，解决方案往往会产生问题，因此在我的解决方案中，我们只添加了一个类，它将与其他情况一起使用使用了class，所以如果存在“card-img-left”类，那么“card-budy”类的左边距将与左对齐图像的大小成比例，如果该类不存在，则该边距将是原版的。这是一个可行的解决方案，不会破坏原有系统，但必须加以改进......

 .card {
      overflow: hidden;
  }

    .card-img-left {
        position: absolute;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 40%;
    }

    .card-img-left ~ .card-body {
        margin-left: 40%;
    }

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

2 个答案: