在ng FlexLayout中缩放图像

Question

我在理解@angular/flex-layout时遇到问题。我已经阅读了许多帖子，博客和示例，但是无法按我的意愿使其正常工作。

我想要一个大的mat-card，填满屏幕的整个宽度。 在此卡中，我需要一些文字，并在文字右侧添加图片。

在此全角卡下方，我需要6张较小的卡。在大屏幕3列，小屏幕2列和最小屏幕1列上。

这是我的闪电战：https://stackblitz.com/edit/angular-6iqcgo

在这个演示中，我有几个问题：

1. 全角卡中的图像未按比例缩放。在不同的屏幕尺寸下，这会使图像失真很多。如何解决这个问题？
2. 卡片较小的3列间距不均匀。第三张卡应该向右移一些。但是，第二行很好。如何解决这个问题？
3. 第一张小卡片上的文字较少，且张数较少。但是我希望所有卡的高度都相同，最好是底部的mat-card-actions。该怎么做？
4. 第二行纸牌的顶部与第一行纸牌的底部重叠。如何解决这个问题？

任何帮助将不胜感激。

Answer 1

1. 我建议将img放在上面有fxFlex的div中：

   <div fxFlex="0 0 50%">
     <img mat-card-image src="https://i.pinimg.com/originals/79/3b/ca/793bca86db40af44ad03534f6927626b.jpg" alt="Free image">
   </div>
   

2. 从包含的div中删除fxLayoutGap="32px"。

3. 它们对我来说都显得一样高。为了使操作位于卡的底部，您应该能够使用mat-card-footer附加到卡的底部。

4. 您可以在margin-top上设置margin-bottom或mat-card以在换行时添加间隙。