How to make a list of Angular mat-card same size

Question

I am rendering a list of asdfasd in Angular, but the images I upload are of different sizes, which causes some asdfasd to be bigger than others. How to make them the same size?

Here is the 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

Try with this

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%;
}

Reference