angular - Material Angular 卡展示

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

目前看来:


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


谢谢!

最佳答案

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

尝试像这样将fxLayoutAlign="start start"添加到您的div中:

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

P.S. 如果您想使用其他选项，请查看Flex-Layout Demo。

关于angular - Material Angular 卡展示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47471780/