Streaming live at 10am (PST)

Retaining ratio of a slider in a grid

Hey friends!

I can’t figure a way to create a responsive 3 column card layout with a slider inside that retains the aspect ratio when scaling.

I’m looking to create this 3 card layout:

I’ve been through the University but can’t find a video that explains this.

Any help?


Here is my site Read-Only:

There’s a neat rule in CSS:

A percentage value on top/bottom padding or margins is relative to the width of the containing block

This allows to create elastic squares or any element that’s supposed to keep a certain aspect ratio.

I made a demo here:

1 Like

Thank you Vincent!

Do you happen to know if there’s a way I can recreate the hover slider on the cards as well?

Having the “card” display a different image depending on the mouse position?

There are many ways to achieve this I guess. You can have three or more overlaying divs to catch the hover, so three transparent “columns” side by side, that will trigger animations for the element underneath.