html - 如何制作相同大小的Angular mat-card列表

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>

标签： htmlcssangular

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

参考