Streaming live at 10am (PST)

Make a responsive slider fit to image


I’m trying to make a slider responsive and keep 16:9 aspect ratio. I’ve added an image with the same aspect ratio (as background image) but I’m having problems making it re-size when going down in screen size. As it looks in full width right now is how I want it to look when going smaller.

I’m also a bit confused if I should add an image in the Slide or if I should add that image as a background. When I’m done with testing I will eventually want it to grab image and text from CMS content.

I hope someone is able to help me.


Here is my site Read-Only:

Hi @vwis. There is no slider on your project. Could you verify please?

Eve Kayser

Hi! Sorry about that, I worked on it yesterday and didn’t realize the link updates. Will fix it and write here again later.



How did you go about working this out…? I am having the same trouble.

I would like a slider to maintain the aspect ratio of 16:9.

I am able to achieve this with a DIV background and padding at 56.25% - works very well. However I would like my slider to behave this way as well… but I am unable to work it out.

Any help appreciated.

Hey! I decided to go with another design so did not get it to work. I am still very new to webdesign and Webflow, but I would be happy to check your project out if you send a link :slight_smile:

I have been struggling on this for a couple of weeks on and off.

Cheers Mate.

Hi guys @vwis @mrstylist!

You can just reset slider configurations and set height: auto:

And just add your image with 16:9 ratio that will fit in the slider.

If you have different image sizes, and still want to keep the 16:9 ratio, you can set height: 56.27 vw and fit: cover.

The idea is to divide 100% width / 1.777 (16:9 ratio), so we have 56.27 vw on height.

I hope it helps you guys,

Eve Kayser


I got it to work, thank you very much! @mrstylist let me/us know if you are still having problems.

evekayser, you are a little ripper! Thanks mate, it worked a treat.


Hm. Hi, doesn’t work in my case. :frowning: I made exactly the same steps, but the height is to high.