既然我回答了你之前的问题所以问题 https://stackoverflow.com/a/52207195/5818622，我将在之前的答案的基础上构建对这个问题的答案。请参考此更新斯塔克闪电战 https://stackblitz.com/edit/angular-heg5il具有不同宽度和高度的图像。
EDIT：调整了answer/stackblitz，使其成为包含5个元素的行。
解释
为了保持图像始终相同的高度，我将“图像”类添加到<img>-tag（你当然可以将CSS应用到img- 直接标记为.product img{...}以及）。
<img class="image" mat-card-image src="{{product.picture.url}}" alt="photo">
并应用了以下 CSS：
.image{
height: 150px; /* adjust as needed */
object-fit: contain;
}
With object-fit: contain您的图像将始终正确缩放并在可用区域内完全可见。
请记住object-fit目前仅以下浏览器完全支持 https://www.w3schools.com/css/css3_object-fit.asp.
EDIT:
为了在每行中获得 5 个元素，您必须调整fxLayoutGap并使用以下方法计算每个元素的宽度fxFlex属性。请按如下方式更改您的代码..
<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">
<!-- Add addProduct-button outside loop -->
<mat-card fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product">
...
</mat-card>
<!-- loop over the products -->
<mat-card fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
...
</mat-card>
</div>
..并更改 20px 设置fxLayoutGap并且在计算范围内fxFlex到您想要的值。
现在设置这些值后，您必须应用最小宽度值，否则所有元素的宽度都会变小，并且行不会换行：
.product{
min-width: 180px; /* adjust as desired */
min-height: 250px;
margin-bottom: 20px; /* same as fxLayoutGap for even distribution */
}
EDIT 2
要使第一个元素与其他元素具有相同的高度，您必须进行调整(min-)height.product CSS 类的高度等于最高产品的高度。
编辑3（回答问题的编辑2）
由于您尚未标记您的问题已回答，因此我修改了您在编辑 #2 中提供的代码以完成您想要的设计：堆栈闪电战 https://stackblitz.com/edit/angular-xprafs
我更改了以下内容：
- 改变了
fxLayoutAlign在容器上"space-evenly stretch"代替fxLayoutAlign="start start"这会将一行中的所有项目均匀分布在 x 轴上，并使它们拉伸到与该行的最高元素一样高。
- 全部删除
fxFlexFill
- added
fxFlex到垫卡内容
- 删除了 .product CSS 类的高度
关于左侧边框..我假设您的容器距离浏览器窗口左侧太近。我也更改了 stackblitz 中的容器 css。
