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 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 */
  height: 80%;
}

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