css - Angular Material Design 卡片高度

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;
}

这确实正确地使图像与可视区域具有相同的大小，但它是通过切断图像的底部来实现的。我宁愿让图像拉伸/收缩而不是仅仅被切断，但我不太确定如何实现这一点。

标签： cssangularangular-material