離子卡內的 Ionic 5 響應式 ion-img

Question

我希望離子卡具有特定的尺寸，並且離子卡的內容適合離子卡。

發生在 ion-card-content 我有一個不適合離子卡尺寸（更准確地說是高度）的圖像。

這是代碼：

<ion-content>
  <ion-row *ngFor="let card of cardData">
    <ion-col>
      <ion-card style="height: 150px;">
        <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>

這就是結果

我不希望圖像被裁剪。 無論卡的大小如何，我都希望它們適合卡。 已經嘗試了很多網上找到的解決方案，但似乎沒有一個有效，因為ion-card-content總是比ion-card大

Answer 1

由於您已將<ion-card>上的height屬性設置為150px ，那么您必須將<ion-img>上的height屬性設置為小於150px （即 100px，因為您在 ion- 中也有標題）卡）。

您的代碼將如下所示

<ion-content>
  <ion-row *ngFor="let card of cardData">
    <ion-col>
      <ion-card style="height: 150px;">
        <ion-card-title>{{card.cardTitle}}</ion-card-title>
        <ion-card-content >
          <ion-img [src]="card.cardImageSrc" style="height: 100px;"></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>