5

我有一个图片库,我想在一个基于宝丽来卡片的系统中显示它们,该系统跨越多行和多列。我面临的问题与图像的布局有关。当图像同时是纵向和横向时,横向图像的 mat-card 属性会膨胀以匹配纵向图像的大小。我怎样才能拥有一个自然填充系统,其中 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;
    }

目前看来: 您可以看到每个横向卡片的容器如何扩展以匹配纵向卡片的高度(不是我想要实现的)

这就是我想要实现的目标: 在此处输入图像描述

谢谢!

4

3 回答 3

0

我认为你正在寻找的是fxLayoutAlign财产。

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

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

PS如果您想尝试不同的选项,请查看Flex-Layout Demo 。

于 2017-11-27T12:39:29.090 回答
0

您可能想尝试砖石或同位素来帮助填补空白,两者在 dev 中都有 npm 包:

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

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

于 2017-11-29T14:27:52.247 回答
0

我知道我的反应会很奇怪,但我认为左边的浮动可能是你正在寻找的(是的,我讨厌自己浮动)

但是,如果您摆脱示例中的所有 flex 内容并直接在 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 解决方案。

于 2017-12-04T08:31:09.237 回答