How to set mat-card-image height to 100%?

问题

I'm facing a weird problem..I have a card and it leaves space at the bottom

This is the code: 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 part:

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

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

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

回答1:

Ok so what actually happened is, the height of my form was greater than height of the image on left. So i had to add a few css properties to the image

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 */
}

来源：https://stackoverflow.com/questions/55065864/how-to-set-mat-card-image-height-to-100