材质角卡显示

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

当前观点：

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

谢谢！

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">

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

Answer 2

你可能想尝试砌石或同位素来帮助填补空白，两者都有开发的npm包：

https://www.npmjs.com/package/angular2-isotope

https://www.npmjs.com/package/angular2-masonry

Answer 3

我知道我的回答会看起来很奇怪，但我认为漂浮可能是你正在寻找（是的，我讨厌漂浮自己）

但是，如果你摆脱了你的例子的所有灵活性，并直接在mat-card上添加保证金

<div 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>



mat-card {
   margin: 1rem;
   float: left;
}

您的卡片会尝试放入可用空间。但是，这当然不适合所有情况。但我认为它是你能找到的更好的css解决方案。