我有一个图片库,我想在一个基于宝丽来卡片的系统中显示它们,该系统跨越多行和多列。我面临的问题与图像的布局有关。当图像同时是纵向和横向时,横向图像的 mat-card 属性会膨胀以匹配纵向图像的大小。我怎样才能拥有一个自然填充系统,其中 mat-card 可以适应图像的宽度/高度比?
HTML:
<div fxLayout="row">
<div layout="column">
<div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null">
<mat-card *ngFor="let postcard of postcards let index = index" >
<img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
</mat-card>
</div>
</div>
</div>
CSS:
.postcards {
max-width: 320px;
}
谢谢!