title: How to set mat-card-image height to 100%?
body: <p>I'm facing a weird problem..I have a card and it leaves space at the bottom<a href="https://i.stack.imgur.com/2PeT8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2PeT8.jpg" alt="image output"></a></p>
  
  <p>This is the code:
  app.component.html</p>
  
  <pre><code>&lt;div fxLayout="row"&gt;
    &lt;mat-card fxLayout="row" fxFlex="80%" class="center space-top"&gt;
      &lt;mat-card-content fxLayout.gt-sm="row"&gt;
        &lt;div fxLayout.gt-sm="column" fxFlex.gt-sm="40%"&gt;
          &lt;img mat-card-image src="../../../assets/background.jpg" alt="background image"&gt;
        &lt;/div&gt;
        &lt;div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css part:</p>
  
  <pre><code>.center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .space-top {
    margin-top: 5%;
  }
  
  @media only screen and (min-width: 799px){
    .gutter {
      margin-left: 32px;
    }
  }
  </code></pre>