0

我已经用左侧的图像构建了这张水平卡片，并且我已经为卡片指定了一个重要的最小高度。

目前图像适合使用宽度：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;
}
4

1 回答 1

1

尽管我不确定您的目标，但我认为您正在寻找 css “object-fit”属性。我已经根据您提供的 HTML 和 CSS + Angular 分叉了一个简单的项目：https ://angular-bootstrap-4-sandbox-mc8neu.stackblitz.io

主要的重要区别是我在 .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;
}
于 2020-05-19T12:38:42.757 回答