Angular 材料角度显示卡

我有一个画廊的图像，我想显示在一个宝丽来卡为基础的系统跨越多行和列。我面临的问题与图像的布局有关。当图像同时为纵向和横向时，横向图像的“mat card”属性会增大，以匹配纵向图像的大小。我怎样才能拥有一个自然填充系统，其中mat卡可以适应图像的宽高比

HTML:

当前视图：

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

---

谢谢大家!

我想你要找的是

fxLayoutAlign

属性

尝试将

fxLayoutAlign=“start”

添加到您的

div

中，如下所示：

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

---

p.S.如果您想使用不同的选项，请查看。

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

---

我知道我的回答会被视为怪异，但我认为左边的浮动可能是你正在寻找的（是的，我自己也讨厌浮动）

但是如果你去掉了你的例子中所有的flex元素，直接在mat卡上增加边距

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

垫卡{
保证金：1rem；
浮动：左；
}

---

您的卡将尝试放入可用空间。但当然，这并不是所有情况下的完美匹配。但我认为这是你能找到的最好的css解决方案

谢谢！到一半了！这会使mat卡的大小与图像相适应，但不会将两个横向图像放在同一列中。我开始相信这可能是不可能的：/看起来你所有的牌都有相同的宽度。假设我建议您在同一个div上尝试

fxLayout=“column”

，看看是否越来越近。让我知道这是否有帮助可悲的是，这使整个页面变成了一个单独的专栏：（我不知道为什么我认为如果不使用更多的库，这将是可以实现的，但我会尝试一下并报告回来。谢谢你的建议，非常感谢。

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

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