使图像适合离子卡

Question

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

我已经尝试过删除填充，边距并使用background-size：cover。

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

所以我想要的是，无论设备显示如何，如果图像的尺寸小于离子卡页眉的尺寸，就可以适应其尺寸。

Answer 1

我找到了解决方案！

我使用媒体查询来设置所需的高度，并且使用对象适合（我不知道该高度！）。

所以保持这样：

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