角材料设计卡高度

Question

我对Angular Material以及如何正确布置事物有些陌生。

我想做的是在页面顶部放置一张图像，该图像始终是可视区域的大小。与https://www.rent.com类似。请注意，无论我是否调整屏幕大小，顶部图像都恰好是可见区域的大小。

这是我到目前为止尝试过的：

html

<div class="container">
  <mat-card>
    <img mat-card-image src="../../assets/download.jpg" alt="Download image">
 </mat-card>
</div>

css

.container {
    height: 100vh;
}

这确实可以使图像大小与可见区域相同，但是可以通过切除图像底部来实现。我宁愿让图像拉伸/缩小而不是只被剪切掉，但我不确定如何实现。