Streaming live at 10am (PST)

Question regarding sliders


#1

Hello all,

I have a question about sliders and the images you use, if I add a slider with an image how would I get the image to resize when the slider resizes?

At the moment I have a slider, but when I changed through the devicess the image gets put out of view, is there a way to do this? or would I need to create a new image for every device?

https://preview.webflow.com/preview/wrapituk?preview=3d22231776e611ec171fbf94aff4c9cd

Best regards,
Matt


#2

Hi @Matty,

Since pictures has some ratio, in this situation you should decide:
or picture will keep slider height on different devices for fit the slider height, but then the car on the picture will not fit the screen,
or pic will change it width to fit device width but then slider height should be change too (because of image ratio).

Cheers,
Anna


#3

Hello @sabanna

Thanks for the reply, I'm afraid you completely lost me. What I'm after is the in the picture to be shown across all devices but it gets pushed out.

If I changed the image to 100% shouldnt it scale the image to fit?

Best regards,
Matt


#4

Height 100% or width 100%? Yes,it will. just do not forget, that picture is background image in the slide not actually img element. and change it width or height you should inside the slide background settings.

I didn't lost your idea. Lets say we just not sure we correct understand each other smile


#5

Hi @Matty, currently as things are styled, when the viewport is smaller than the image, the image will get cropped, so I suggest to update your bg image styling to use the Background Cover option and center positioning for the background image.

See my example video:

I hope this helps, let me know if you have any questions.


#6

@cyberdave

Thank you! that has helped allot, is there a way to reduce the black background? for e,g on mobile view

Once again, thank you!


#7

Hi @Matty, you can try to adjust the slider height, on the slider class..try that and see if it helps.

You can also crop the original image to a smaller overall image width, so that less black space is shown on the image on left and right of the car, which will help with styling and layout of the image on smaller devices while keeping the actual car image clearly visible.

Cheers,
Dave


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.