css - 在 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. 第二行牌的顶部与第一行牌的底部重叠。如何解决这个问题？

任何帮助都感激不尽。

标签： cssangularflexboxangular-flex-layout

Answer 1

1. 我建议将 img 放在一个 div 中fxFlex：

   <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. fxLayoutGap="32px"从包含的 div 中删除。

3. 在我看来，它们的高度都一样。对于卡片底部的操作，您应该能够使用mat-card-footer附加到卡片底部。

4. 您可以设置 amargin-top或margin-bottom以在mat-card包装时添加间隙。