Css 在FlexNG布局中缩放图像

我无法理解

@angular/flex布局

。我读过很多文章、博客和例子，但都没能像我希望的那样让它发挥作用

我想要一张大的

垫子卡

，填满整个屏幕的宽度。 在这张卡片里面我想要一些文字，在文字的右边是一张图片

在这张全宽卡片下面，我想要6张更小的卡片。大屏幕上有3列，小屏幕上有2列，最小屏幕上有1列

这是我的闪电战：

在本演示中，我遇到了几个问题：

全宽卡中的图像未按比例缩放。这会在不同的屏幕尺寸上使图像扭曲很多。如何解决这个问题

具有较小卡片的3列的间距不均匀。第三张牌应该往右转一点。然而，第二排是好的。如何解决这个问题

第一张小卡的文字较少，高度也较低。但我希望所有的卡片都具有相同的高度，最好是底部的

垫卡动作

。如何做到这一点

第二行卡片的顶部与第一行卡片的底部重叠。如何解决这个问题

任何帮助都将不胜感激

我建议将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>

从包含的div中删除

fxLayoutGap=“32px”

他们在我看来都一样高。对于卡底部的操作，您应该能够使用

mat card footer

将其附加到卡底部

您可以在

mat卡

上设置

页边距顶部

或

页边距底部

，以在其包装时添加间隙

---

谢谢米奇，我已经做了你建议的更改，并且做了一些更多的更改，现在它正在按预期工作。除了我的第三个问题。第一张小卡片的高度较低。但我现在可以接受。我已经更新了。我接受你的回答。