Help in CSS

[Mylengua]

Dear Community,

I need a help in CSS. If it’s possible to change aspect ratio of image in in card/grid collection with CSS, please help me with it.

I have a classic app with numerous flashcards with 3:4 aspect ratio. While migrating the images to new app, the images don’t fit in collection. As of now I have been using image component and showing one image at a time, but with collection, I can horizontal and vertical scroll just like class apps.

If it’s possible with CSS, I’ll switch from Legacy plan to maker plan and add CSS to change the aspect ratio.

Regards,
Chirag

[ThinhDinh]

I think it’s definitely doable. What type of collection will you be using?

[Mylengua]

Most probably grid.

[ThinhDinh]

Can you share some sample image URLs that you are using?

[Mylengua]

Here are some samples:

[ThinhDinh]

.card-collection .aspect-four-by-three {
padding-top: 125%;
}

I name my collection’s CSS class “card-collection”. Setup with size L, original aspect ratio 4:3.

[Mylengua]

Thanks a lot brother for your help