Как установить высоту изображения карты на 100%?

Question

У меня странная проблема .. У меня есть карта, и она оставляет место внизу

Это код: app.component.html

<div fxLayout="row">
  <mat-card fxLayout="row" fxFlex="80%" class="center space-top">
    <mat-card-content fxLayout.gt-sm="row">
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="40%">
        <img mat-card-image src="../../../assets/background.jpg" alt="background image">
      </div>
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter">
        <router-outlet></router-outlet>
      </div>
    </mat-card-content>
  </mat-card>
</div>

css часть:

.center {
  margin-left: auto;
  margin-right: auto;
}

.space-top {
  margin-top: 5%;
}

@media only screen and (min-width: 799px){
  .gutter {
    margin-left: 32px;
  }
}

Answer 1

Хорошо, так что на самом деле произошло, высота моей формы была больше, чем высота изображения слева. Поэтому мне пришлось добавить несколько свойств CSS к изображению

img {
  height: fit-content; //so that it takes up full space
  max-height: 500px !important; // this prevents the image from being extremely big
  object-fit: cover; 
  object-position: center; /* this centers and crops the image so that it doesn't break the aspect ratio */
}