title: Angular Material Design Card Height
body: <p>I am a bit new to Angular Material and how to correctly lay things out.</p>
  
  <p>What I am trying to do is have an image at the top of my page that is always the size of the viewable area. Something similar to <a href="https://www.rent.com" rel="nofollow noreferrer">https://www.rent.com</a>. Notice the top image is exactly the size of the viewable area, no matter if I resize the screen.</p>
  
  <p>Here is what I've tried so far:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;mat-card&gt;
      &lt;img mat-card-image src="../../assets/download.jpg" alt="Download image"&gt;
   &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.container {
      height: 100vh;
  }
  </code></pre>
  
  <p>This does correctly make the image the same size as the viewable area, but it does that by cutting off the bottom of the image. I would rather have the image stretch/shrink instead of just being cut off, but I am not quite sure how to achieve that.</p>