如何在不丢失宽高比的情况下在 ion-img 中将图像填充到整个 space？

Question

我目前的进度卡在这样的地方。我需要帮助

我需要 ion-img 中的图片在不丢失外观的情况下填充其容器。 这是我的 html 代码

<ion-col class='left-content'>
  <ion-img [src]='voucher.image'></ion-img>
</ion-col>

这是我的 scss 代码

ion-img {
  min-width: 5.7em;
  min-height: 5.7em;
  border-radius: 0.5em;
  @include my-img-shadow();
}

.left-content {
  padding-top: 0.8em;
  position: absolute;
  left: 0.5em;
}

Answer 1

使用object-fit:cover.

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

Answer 2

.ion-img { 
  height: 100%; 
  width: 100%; 
  object-fit:cover; 
}