How to make an image to take the full height of a material card?

Question

I'm trying to put an image inside a mat-card so that it takes the full height of the card -

<mat-card class="mat-elevation-z4">
    <img src="/assets/images/the-godfather.jpg" width="300">
</mat-card>

I removed the padding of the card -

mat-card {
    width: 600px;
    border-radius: 0;
    padding: 0;
}

But there's always a little space below the image when it renders, as shown below -

The original image dimension is 700x1000. So it's no like it is falling short in height to keep the aspect ratio. I couldn't find any padding/margin in browser Dev tool that might cause that extra space.

Can anyone give a clue?

img { height: 100%; } + Remove static width if you want to make it 100% height. Your setting width: 300 as inline style. Make it auto or the image will stretch — Marlon Berdefy, Jun 12 '20 at 11:32
View the image in your browser inspector, what does it show ? — Martin, Jun 12 '20 at 11:33

score -1 · Answer 1 · answered Jun 12 '20 at 11:36

-1

<mat-card class="mat-elevation-z4">
  <img src="/assets/images/the-godfather.jpg">
</mat-card>

CSS

mat-card {
  width: 600px;
  border-radius: 0;
  padding: 0;

  > img {
    height: 100%;
  }
}

answered Jun 12 '20 at 11:36

Marlon Berdefy

321
2
11

5

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – β.εηοιτ.βε Jun 12 '20 at 19:25

How to make an image to take the full height of a material card?

1 Answers1