Как составить список Angular мат-карт одинакового размера

Question

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

Вот это HTML

<div class="cardList">
    <ng-container *ngFor="let card of comics">
        <mat-card class="example-card">
            <mat-card-content>
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>{{card.name}}</mat-card-title>
                </mat-card-header>
                <img mat-card-image [src]="card.picture">
                <mat-card-content>
                    <p>
                        {{card.description}}
                    </p>             
                </mat-card-content>
                <mat-card-actions>
                    <button mat-raised-button color="primary" (click) = "openDialog(card)">${{card.amount}}</button> 
                </mat-card-actions>
            </mat-card-content>
        </mat-card>
    </ng-container>
</div>
<mat-divider></mat-divider>

Answer 1

Попробуйте с этим

mat-card img{
  object-fit: cover; /*this makes the image in src fit to the size specified below*/
  width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
  height: 80%;
}

Ссылка