Make all images in mat-card-image same size but scale correctly

Question

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

Answer 1

Just add css-class to the image and and style the image from the SCSS file.

<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">

Now in SCSS:

imgs {
  height: 50px;
  width: 50px;
}

And for more to Information visit W3school.com/image.

Answer 2

Just add this style reference in your code. If you want to apply this styles to all your cards in the view, add to your style file:

mat-card img{
  object-fit: cover; /*this makes the image in src fit to the size specified below*/
  width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
  height: 80%;
}

Another solution to this issue may be using the class of bootstrap "img-responsive". Here is a brief description