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

Posted 2023-03-05

【中文标题】Bootstrap/flexbox 卡：在桌面上将图像移动到左侧/右侧

【英文标题】：Bootstrap/flexbox card: move image to left/right side on desktop

【发布时间】：2017-01-06 15:03:29

【问题描述】：

我正在尝试使用启用了 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"  title="">
      </div>
    </div>
  </div>
</section>

现在，当我缩放到更大的屏幕时，我得到了以下输出（Bootstrap 应该这样，但不想要）：

我希望看到的是：

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

我在 Google 上搜索并尝试了许多不同的解决方案，但所有这些似乎都是过于复杂或“老套”的解决方案。所以我想知道是否真的没有简单的方法来实现这种布局......？

注意：解决方案不必与 Bootstrap 相关，此类问题的通用解决方案更好。

【问题讨论】：

background-size 或 object-fit 是“简单”的 CSS 解决方案。

是的，但是使用背景大小，我不能使用那个 img 标签，而是必须使用 div 来代替？而且我认为 IE 和 Edge 不支持 object-fit 所以它不是可接受的解决方案。

这是两种“简单”的方法。当然，如果您需要为旧的/无法使用的浏览器实现回退，事情会变得更加复杂。对于 IE/Edge 中图像的对象匹配，有一些解决方法/polyfills。

我选择了背景大小的方式。我实际上想使用 img 标签，但宁愿牺牲它，也不愿使用过于复杂的解决方案和回退机制。

【参考方案1】：

更新：Bootstrap 现在正式支持横向卡片了

我创建了一个功能 及时请求：https://github.com/twbs/bootstrap/issues/20794。如今，Bootstrap 支持并记录了水平卡片。

Bootstrap 实现基于网格和实用程序类的组合：

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" >
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

该解决方案实际上与我使用的几乎相同。您可能仍需要进行细微调整以使其按您的意愿工作，文档中也指出：“可能需要进一步调整，具体取决于您的卡片内容”。

原答案

我想出了一种方法来做到这一点，使用背景尺寸：封面。我不得不使用 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 之间仍有一些额外的填充。因此，白色区域比图像略大。对我来说，这不是问题，所以我没有删除它们。

【讨论】：

@RajaKhoury 我不认为这是官方支持的-他们的 card-img-right 类在该示例的辅助 css 文件中-它不在主要发行版中...当前支持水平卡请求：github.com/twbs/bootstrap/issues/20794

非常感谢，div class="row" 有很大帮助

您可以使用 p-0 和 m-0 将填充或边距设置为零 (0) 以消除灰框。

【参考方案2】：

我找到了一个解决方案，图像高度有问题，但这是另一个问题...：P

好的，重新发明已经准备好的东西的最大问题是，当我们需要原始功能时，解决方案往往会出现问题，所以在我的解决方案中，我们只是添加了一个类，它可以与另一种情况一起使用使用了类，因此如果存在“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%;