ionic4 - 使图像适合离子卡

Question

嗨，我正在尝试将图像放入离子卡头中，但图像不适合。

我已经尝试删除填充、边距并使用背景尺寸：封面。

<ion-card>
   <ion-card-header no-padding>
      <ion-img [src]="filter.url" no-margin no-padding style="width: 100%;"></ion-img>
   </ion-card-header>

   <ion-card-content>
      <p text-center>{{filter.name}}</p>
   </ion-card-content>
</ion-card>

所以我想要的是，如果它比离子卡头小，图像是否会拉伸，以适应它的大小，无论设备显示如何。

标签： ionic4

Answer 1

我找到了解决方案！

我使用媒体查询来设置我想要的高度，并使用对象拟合（我不知道它存在！）。

所以一直这样：

.image--size {
   width: 100%;
   height: 65.66px;
   object-fit: cover;
}