在 FlexLayout 中缩放图像

Question

我无法理解 @angular/flex-layout。我已经阅读了大量的帖子、博客和示例，但无法如我所愿地让它发挥作用。

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

在这张全角卡片下面，我想要 6 张小卡片。大屏3栏，小屏2栏，小屏1栏。

这是我的 stackblitz：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. 您可以在 mat-card 上设置 margin-top 或 margin-bottom 以在换行时添加间隙。