材质角卡显示

发布时间：2020-12-17 18:06:43 所属栏目：安全来源：网络整理

导读：我有一个图像库,我想在基于宝丽来卡的系统中显示它们,跨越多行和多列.我面临的问题与图像的布局有关.当图像同时是纵向和横向时,横向图像的mat-card属性会变得臃肿,以匹配纵向的尺寸.如何使用自然填充系统,垫卡可以适应图像的宽高比？ HTML： div fxLayout="r

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

目前来看：

You can see how the container for each landscape card gets expanded to match the height of the portrait one (not what I would like to achieve)

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

enter image description here

谢谢！

解决方法

我认为你要找的是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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!