Ionic 5 固定尺寸ion-card内ion-img自适应不裁剪问题求助

问题根源 #

• ion-card、ion-card-content、ion-card-title默认自带内边距/外边距，会占用你设置的150px高度，导致ion-card-content实际可用高度不足
• ion-img默认object-fit属性为cover，会自动裁剪超出容器的部分保证填充满容器
• 没有给ion-card-content设置高度规则，内部元素会自然撑开导致溢出卡片高度

修复步骤 #

1. 修改模板代码 #

给ion-card添加自定义类方便样式控制，避免行内样式污染全局：

<ion-content>
  <ion-row *ngFor="let card of cardData">
    <ion-col>
      <!-- 添加自定义类fixed-height-card -->
      <ion-card class="fixed-height-card">
        <ion-card-title>{{card.cardTitle}}</ion-card-title>
        <ion-card-content >
          <ion-img [src]="card.cardImageSrc"></ion-img>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

2. 添加对应样式 #

将以下代码放到对应页面的.scss文件中，如果样式不生效可以移到全局global.scss文件：

.fixed-height-card {
  height: 150px;
  display: flex;
  flex-direction: column;
  padding: 0; // 移除卡片默认内边距
  margin: 10px 0; // 可按需调整卡片外边距

  ion-card-title {
    margin: 8px 12px 0; // 调整标题边距，避免占用过多高度
    font-size: 14px; // 可按需调整标题大小
    flex-shrink: 0; // 固定标题高度，不会被压缩
  }

  ion-card-content {
    flex: 1; // 自动占满卡片剩余高度
    padding: 0; // 移除内容区默认内边距
    margin: 0;

    ion-img {
      width: 100%;
      height: 100%;
      object-fit: contain; // 核心配置：图片等比例缩放完整显示，不会被裁剪
    }
  }
}

效果说明 #

调整后ion-card会固定为150px高度，标题固定显示，剩余高度全部交给ion-card-content，内部的ion-img会自动等比例缩放适配内容区大小，不会出现裁剪和溢出问题。如果不需要图片周围留白，希望填满内容区，把object-fit: contain改成object-fit: cover即可。

内容的提问来源于stack exchange，提问作者Ricardo Almeida