Html Mat图像宽度填充

我正在用角材料制作卡片，但由于某些原因，我无法让图像填满如图所示的空间，红色区域是我希望图像占据空间的地方

Html:

.card{
宽度：400px；
高度：自动；
背景：红色；
保证金：20px自动；
边界半径：4px；
显示器：flex；
弯曲方向：立柱；
}
#图像容器{
背景：DDD；
}
.卡德街{
背景：红色；
宽度：100%；
高度：100px；
}
.img{
身高：100%；
宽度：100%；
}

这里有一些文字

这里有一些文字

这里有一些文字

您的代码应该可以在没有CSS的情况下运行，只是

您可以创建一个示例吗？看起来像是

.mat card image

类是可以的，但是

mat card

组件有

填充

我尝试使用stackblitz示例，但什么都没有。

 <mat-card (click)="optionPicked()">

                      <img  mat-card-image [src]="backgroundImage">

                      <mat-card-subtitle>
                        <b>{{SubtitleHere}}</b>
                      </mat-card-subtitle>

                      <mat-card-content>

                      </mat-card-content>
 </mat-card>

.mat-card-image {
  width: 100%;
  margin: 0 -16px 16px -16px;
  padding: 0%;
}