title: Mat-image width fill
body: <p>I was working on making cards using angular materials but for some reason, I can't get the image to fill up the space as shown in the image with red area is where I want the image to take up space.</p>
  <p><a href="https://i.stack.imgur.com/vcc9U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vcc9U.png" alt="enter image description here" /></a></p>
  <p>Html:</p>
  <pre><code> &lt;mat-card (click)=&quot;optionPicked()&quot;&gt;
  
                        &lt;img  mat-card-image [src]=&quot;backgroundImage&quot;&gt;
  
                        &lt;mat-card-subtitle&gt;
                          &lt;b&gt;{{SubtitleHere}}&lt;/b&gt;
                        &lt;/mat-card-subtitle&gt;
  
                        &lt;mat-card-content&gt;
  
                        &lt;/mat-card-content&gt;
   &lt;/mat-card&gt;
  </code></pre>
  <p>CSS3:</p>
  <pre><code>.mat-card-image {
    width: 100%;
    margin: 0 -16px 16px -16px;
    padding: 0%;
  }
  </code></pre>