I am currently working on a project using Angular 7, Material, and Flex-layout. I am facing a challenge in making the mat-card with a mat-card-image responsive.
The mat-card-image is a square picture with a maximum width and height of 160px.
This is the layout I am trying to achieve:
https://i.sstatic.net/Dic24.png
In the left scenario, the parent container is large enough to display the mat-card with the maximum-size mat-card-image (160*160px). The size of the mat-card is determined by the equation: (width) * (height) → (160px) * (mat-card-header + 160px + mat-card-content). Everything works perfectly in this case.
In the right scenario (responsive design), the parent container is not big enough: the mat-card-image needs to be resized. For example, the new size of the mat-card-image becomes 100*100px, so the mat-card size changes to (width) * (height) → (100px) * (mat-card-header + 100px + mat-card-content). This is where I encounter an issue as the mat-card-image doesn't resize:
https://i.sstatic.net/iHyYz.png
The mat-card is outlined in red but the content doesn't fit properly within the mat-card (the image should be resized).
I have tried various solutions, but below 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;
}
Any suggestions on how to achieve this responsive design?