Material Angular card display

user_1161654 0
Viewed 2851

I have a gallery of images and I would like to display them in a polaroid card-based system spanning multiple rows and columns. The problem I'm facing relates to the layout of the image. When images are both portrait and landscape, the mat-card attribute for the landscape ones gets bloated up to match the size of the portrait ones. How can I have a naturally filling system where the mat-card is adaptable to the width/height ratio of the image?

HTML:

    <div fxLayout="row">
        <div layout="column">
            <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null">
                <mat-card *ngFor="let postcard of postcards let index = index" >
                        <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
                </mat-card>
            </div>
        </div>
    </div>

CSS:

    .postcards {
        max-width: 320px;
    }

Current view: You can see how the container for each landscape card gets expanded to match the height of the portrait one (not what I would like to achieve)

And this is what I would like to achieve: enter image description here

Thank you!

angular-flex-layout angular-material angular
3 Answers

I think what you're looking for is fxLayoutAlign property.

Try to add fxLayoutAlign="start start" to your div like this:

<div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="start start" class="mat-elevation-z0" *ngIf="postcards != null">

P.S. Check out Flex-Layout Demo if you want to play around with different options.

user_23277130
Related