Make a responsive slider fit to image

Design help General
1

Hello!

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.

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/cal-1-0?utm_medium=preview_link&utm_source=dashboard&utm_content=cal-1-0&preview=77874108770c01158e32196d77a9abcf

2

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

Eve Kayser

3

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

Thanks!

4

Hi VWIS,

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.

5

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:

6

https://preview.webflow.com/preview/slider-responsive-at-16-9?utm_medium=preview_link&utm_source=dashboard&utm_content=slider-responsive-at-16-9&preview=58593fd3ea67b537e1b21839584a20be&mode=preview

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

Cheers Mate.

7

Hi guys @vwis @mrstylist!

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

image
image1919×864 127 KB

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

image
image1919×862 127 KB

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.

image
image1919×862 130 KB

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,
Cheers!

Eve Kayser

4 Likes
8

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

9

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

2 Likes
10

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

11

Hello -

I’m trying to do a slider on the project pages for this interior design firm’s website.

I’ve been able to do everything it seems OTHER THAN figure out the ratio. Yes, there are several images with different sizes (some portrait, and some landscape). Ideally, I’d like the images ratio to scale in order to show the entirety of the photos, especially without taking over most of the screen size.

I’ve tried many of the tips I’ve found on this forum with no success. I’d really appreciate someone’s help if possible!

Here’s the read-only link: Webflow - Francine Gersting Interiors

12

Did you figure out a solution?

13

Hi @vincent and @Rajendra_Rathore - I’m wondering if either of you could help me figure out the slider on the project page templates we’re trying to create.

Thanks in advance!

14

Hi @Giovanni_Arias
Sorry, I was not active here for long.
Can you share a read-only link and point out the issue again?