mat-card's content not fitting mat-card

Question

I'm building an Angular 7 / Material / Flex-layout app and I'm having difficulty getting mat-card with a mat-card-image responsive.

The mat-card-image is a square picture with max-width/max-height 160px.

Scheme of what I'm trying to achieve:

• On the left the parent is big enough to display the mat-card with the max-size mat-card-image (160*160px). It means the mat-card's size is (width) * (height) → (160px) * (mat-card-header + 160px + mat-card-content). All is working fine for me here.

• On the right (responsive way) the parent isn't big enough: the mat-card-image is resized. e.g. the new mat-card-image's size is 100*100px, mat-card's size is (width) * (height) → (100px) * (mat-card-header + 100px + mat-card-content). This is where I'm having a problem, the mat-card-image isn't resized:

In red is the mat-card but as you can see the content isn't fitting the mat-card (the image should be resized).

I tried a lot of things but here is my current code:

HTML:

       <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>


            <mat-card>
                <mat-card-header fxLayoutAlign="center">
                    <mat-card-title style="margin-bottom: 0px;" >
                        foo
                    </mat-card-title>
                </mat-card-header>

                <img mat-card-image [src]="foo" style="margin-bottom: 0px;" layout-fill>

                <mat-card-content fxLayoutAlign="center" style="margin-top: 0px;">
                    foo
                </mat-card-content>

            </mat-card>

            <span></span>

        </div>

CSS:

mat-card {
    max-width: 160px;
    max-height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
}

How to achieve that ?

Answer 1

Consider using background-size: cover; to resize the image with the container.

Can you give us more of your css? Trying to edit your code, but there's not enough to work with at the moment... http://www.cssdesk.com/rccRc