使图像适合离子卡答案

【问题标题】：Fit image into ion-card使图像适合离子卡
【发布时间】：2019-05-18 13:42:17
【问题描述】：

您好，我正在尝试将图像放入 ion-card-header，但图像不适合。

我已经尝试移除内边距、边距并使用 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>

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

【问题讨论】：

标签： ionic4

【解决方案1】：

我找到了解决办法！！

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

所以一直这样：

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

【讨论】：