在卡片中裁剪图像

Question

我制作了这张水平卡片，左边有一个图像，我为卡片指定了一个很重要的最小高度。

目前图像适合使用宽度：100% 和高度：100% 的卡片，但我希望它使用父级的全高，然后裁剪它的宽度。

我正在使用 Bootstrap 4

HTML

<div class="card mb-3 rounded shadow">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="{{ course.media[0].fileName }}" class="card-image" alt="">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <span class="badge badge-pill badge-danger">{{ course.courseNumber }}</span>
        <h5 class="card-title">{{ course.name }}</h5>
        <p class="card-text">{{ course.description }}</p>
      </div>
    </div>
  </div>
</div>

CSS

$nav-red: #e51400;

.card {
    max-width: 540px;
    min-height: 200px;
}

.card-image {
    width: 100%;
    height: 100%;
}

.card-body span{
    background-color: $nav-red !important;
    float: right;
}

Answer 1

虽然我不确定你的目标，但我认为 css "object-fit" 属性是你要找的。我已经根据您提供的 HTML 和 CSS + Angular 分叉了一个简单的项目：https://angular-bootstrap-4-sandbox-mc8neu.stackblitz.io

主要的重要区别是我添加了 "min-height" 到 .card > .row 元素，以解决拟合问题。

最终代码如下所示：

HTML

<div class="card mb-3 rounded shadow">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="{{ course.media[0].fileName }}" class="card-image img-fluid img-cover" alt="">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <span class="badge badge-pill badge-danger">{{ course.courseNumber }}</span>
        <h5 class="card-title">{{ course.name }}</h5>
        <p class="card-text">{{ course.description }}</p>
      </div>
    </div>
  </div>
</div>

SCSS

.card {
    max-width: 540px;
    > .row {
        min-height: 200px;
    }
}

.card-image {
    width: 100%;
    height: 100%;
}

.card-body span{
    background-color: #e51400 !important;
    float: right;
}

.img-cover {
  object-fit: cover;
}

在卡片中裁剪图像

Crop image in card

html

css

bootstrap-4

bootstrap-cards