16:9 ratio on a Collection List Video Lightbox Slider

Looking to have a Collection List based slider/ video light-box that maintains a 16:9 ratio for the thumbnails.

I have attempted to place the image inside a image-wrapper [div] with position: relative and a 56.25% padding-top…then setting the image [thumbnails] to position: absolute, height/width: 100%, fit: cover with top:0, right:0, bottom:0, left:0…to no avail :frowning:

What am I doing wrong?

Here is my public share link:
https://preview.webflow.com/preview/orthospinology?utm_medium=preview_link&utm_source=dashboard&utm_content=orthospinology&preview=d99fb6a1e4994eb5d45c70dcda8d6f9c&workflow=preview

Jim,
Spent a bit of time on this but can’t find the bit you are referring to.
Can you tell me the page and pop up a picture of the section, element for me.

HI @iDATUS,
The page is: https://orthospinology.webflow.io/patients

Cheers, as you say that defiantly done look right.
I will take a look and report back.

Jim,
Your thumb nails are way different 2000x1121 and 320x180
Contain says don’t go bigger and the 320x ones don’t get to be contained.
You want stretch to fit or something like that.
If I have miss understood please let me know.

@iDATUS
Makes sense. Not sure how those little guys even got in there. If I were to update the sizes [making them more comperable] how would you suggest I pull off the 16:9 forced crop/constrain?

Think you were originally on the right track with 56.25%.
If it was me, as you have a lot of the same thing you want to show I would look at grid.
However not one for leaving it there I have sorted it.
Now I guess you want to know how :wink:


If this and the other comment is the solution please tick it and the love heart.

I’m using a piece of JS code to handle the video slider and apparently, it is already applying a 16:9 ratio. Guess that solves that! Thanks for all your help @iDATUS