Блог

Я хочу, чтобы ионная карта имела определенный размер, а содержимое ионной карты соответствовало ионной карте.

Бывает, что внутри содержимого ионной карты у меня есть изображение, которое не соответствует размерам ионной карты (точнее, высоте).

Вот код:

 lt;ion-contentgt;  lt;ion-row *ngFor="let card of cardData"gt;  lt;ion-colgt;  lt;ion-card style="height: 150px;"gt;  lt;ion-card-titlegt;{{card.cardTitle}}lt;/ion-card-titlegt;  lt;ion-card-content gt;  lt;ion-img [src]="card.cardImageSrc"gt;lt;/ion-imggt;  lt;/ion-card-contentgt;  lt;/ion-cardgt;  lt;/ion-colgt;  lt;/ion-rowgt;   lt;ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)"gt;  lt;ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."gt;  lt;/ion-infinite-scroll-contentgt;  lt;/ion-infinite-scrollgt; lt;/ion-contentgt;  

И вот результат

Я не хочу, чтобы изображения были обрезаны. Я хочу, чтобы они подходили к карточке независимо от ее размера. Уже перепробовал множество решений, найденных в Интернете, но, похоже, ни одно из них не работает, так как содержимое ионной карты всегда больше, чем у ионной карты

height Поскольку lt;ion-cardgt; вы установили атрибут на height 150 пикселей, вам необходимо установить lt;ion-imggt; значение атрибута меньше 150 пикселей (т. е. 100 пикселей, так как у вас также есть заголовок внутри ионной карты).

Ваш код будет выглядеть следующим образом

 lt;ion-contentgt;  lt;ion-row *ngFor="let card of cardData"gt;  lt;ion-colgt;  lt;ion-card style="height: 150px;"gt;  lt;ion-card-titlegt;{{card.cardTitle}}lt;/ion-card-titlegt;  lt;ion-card-content gt;  lt;ion-img [src]="card.cardImageSrc" style="height: 100px;"gt;lt;/ion-imggt;  lt;/ion-card-contentgt;  lt;/ion-cardgt;  lt;/ion-colgt;  lt;/ion-rowgt;   lt;ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)"gt;  lt;ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."gt;  lt;/ion-infinite-scroll-contentgt;  lt;/ion-infinite-scrollgt; lt;/ion-contentgt;