时间戳

首页 > 解决方案 > 如何在 bootstrap/css 中裁剪半张卡片图像？

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

问题描述

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

参考

这是我的代码：

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

标签： cssbootstrap-4

解决方案

这使用该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>

推荐阅读