angular - Material Angular 卡片展示

Question

我有一个图片库，我想在一个基于宝丽来卡片的系统中显示它们，该系统跨越多行和多列。我面临的问题与图像的布局有关。当图像既是纵向图像又是横向图像时，横向图像的 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;
    }

当前 View :

这就是我想要实现的目标:

谢谢!

Answer 1

我认为您正在寻找的是 fxLayoutAlign 属性。

尝试将 fxLayoutAlign="start start" 添加到您的 div 中，如下所示:

<div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="start start" class="mat-elevation-z0" *ngIf="postcards != null">

附言查看Flex-Layout Demo如果您想尝试不同的选择。