如何制作相同尺寸的Angular Mat卡列表

Question

我在Angular中渲染了一个asdfasd列表，但是我上传的图像大小不同，这导致某些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%;
}

Reference