Setting images to "cover" in a slider

Design help General
1

Hello,

I am creating a site with a slider to showcase my work. I have the slider set up but the images I am using are different ratios. How can I set this up so that the images that are not as tall will simply fill up the same space? I have tried setting the images to “cover” but that does not seem to work.
Thanks!

Here is my site Read-Only:
https://preview.webflow.com/preview/norml?utm_medium=preview_link&utm_source=designer&utm_content=norml&preview=ca82fc1bc565ceadae8a7aca50b8d9bc&mode=preview

Link to published site:
https://norml.webflow.io/

2

You need to give your images a set height and width for the object-fit setting to work. If you want it to fill the entirety of the slide, just make sure you have dimensions on your slide element then give the images inside a width and height of 100%.

Edit: I noticed your slider mask isn’t set to overflow: hidden so your website scrolls pretty far right when previewing it. Make sure you keep this setting checked.

3

Thank you! That was it.

1 Like