css - 如何在 bootstrap/css 中裁剪半张卡片图像？

Question

我正在尝试将这张图片切成两半并在卡片中显示设计的区域，这里有一个截图作为引用，但我不太确定如何:

这是我的代码:

<div class="card">
  <img class="card-img-top" src="source" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div> 

Answer 1

这使用了 object-fit 属性。请注意，这在 IE 中不起作用，但在 Edge 中有效。如果您需要 IE11 支持，我可以更新答案。

.card img {
  /* change the height to whatever you want */
  height: 100px;
  object-fit: cover;
  display: block;
  width: 100%;
}

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/600x800" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div>