CODEWITHSUNDEEP
cssangularionic-framework
Ricardo Almeida
Ricardo Almeida

Reputation: 152

Ionic 5 responsive ion-img inside ion-card

I want the ion-card to have a specific size and the ion-card-content to fit the ion-card.

Happens that inside ion-card-content I have an image that doesn't fit the ion-card sizes (height more precisely).

Here is the code:

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

And this is the result

enter image description here

I don't want the images to be cropped. I want them to fit the card no matter the size of the card. Already tried a lot of solutions found online but no one seems to work, since ion-card-content is always bigger than the ion-card

Upvotes: 0

Views: 1379

Answers (1)

Mohamed Karkotly
Mohamed Karkotly

Reputation: 1517

Since you have set the height attribute on <ion-card> to 150px, then you have to set the height attribute on <ion-img> to a value less than 150px (i.e 100px, Since you also have the title inside the ion-card).

Your code will be like the following

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

Upvotes: 1

Related Questions