title: Make all images in mat-card-image same size but scale correctly
body: <p>This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change</p>
  
  <p>All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls.</p>
  
  <p>But using the image in a mat-card it is a longer length and thus looks out of place shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/M6dLd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6dLd.png" alt="enter image description here"></a></p>
  
  <p>The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for displaying these:</p>
  
  <pre><code>&lt;div *ngIf="data;else other_content"&gt;
      &lt;div class="row"&gt;
        &lt;div *ngFor="let project of data" class="col-md-6"&gt;
          &lt;div&gt;
            &lt;mat-card class="mat-elevation-z4"&gt;
              &lt;mat-card-header&gt;
                &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
                &lt;mat-card-title&gt;{{project.title}}&lt;/mat-card-title&gt;
                &lt;mat-card-subtitle&gt;{{project.category}}&lt;/mat-card-subtitle&gt;
                &lt;div class="grow-empty"&gt;&lt;/div&gt;
                &lt;div *ngIf="project.source"&gt;
                  &lt;button mat-raised-button (click)="openSite(project.source)"&gt;SOURCE&lt;/button&gt;
                &lt;/div&gt;
              &lt;/mat-card-header&gt;
              &lt;img mat-card-image src="{{project.image}}" alt="{{project.title}}"&gt;
              &lt;mat-card-content&gt;
                &lt;p&gt;
                  {{project.detail  | slice:0:250}}...
                &lt;/p&gt;
              &lt;/mat-card-content&gt;
              &lt;mat-card-actions&gt;
                &lt;button mat-raised-button&gt;Information&lt;/button&gt;
              &lt;/mat-card-actions&gt;
            &lt;/mat-card&gt;
          &lt;/div&gt;
          &lt;br&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it</p>
  
  <p>I want it to be a set scale like it is, but take any image and scale it up/down to sit and be an appropriate size for the card itself (like Callum.Tech card for example)</p>