Getting my homepage slider image to display fully in all breakpoints

I think this should be an easy fix (I figured out my navbar issue which was an easy fix), now I’m just unsure how to style my homepage slider image so that it will display fully on each breakpoint, if it would be possible for someone to take a screenshot of the correct style setting that would be a huge help, thanks, I’ve tried every combination possible, and watched a few tutorials on the subject.

I’m guessing I should be styling as far up the parenting chain as possible.

The designer iteration is vastly different than the current live website, I’d like to keep the designer version the way it is, and publish it once I figure out the right way to constrain the picture/image dimensions on each break point. If i need to pull the HERO slider image out of it’s parent container or something, let me know.

current image is 1920 pixels wide by 1280, I’ll be adding more images that will be that same size.

Thanks webflow people.


Here is my site Read-Only: https://preview.webflow.com/preview/holidayflotilla?preview=42ef8dfc206da4ee5c7b3af5e9959085

Hi @SomeHack,

I was going to do this with screenshots, but it’s easier with video! Hope this helps.

CloudApp

Let me know if you have any questions.

(Edit: I just realized that that video had audio, helpful tips with the shift and arrow keys!)

Wow thank you for going to the trouble of making that (what program did you use to capture that? ahh https://www.getcloudapp.com/ i see!), and I appreciate the typography tip at the end, definitely going to make use of that.

Regarding the image, I’m hoping to show the image in its entirety (full width and height) and when i set it as 100 vw (Home Slide) it seems to screw up the height ratio which i set to Auto, I know the picture will be much smaller on mobile but I was still just hoping to have the entire picture visible (I was going to try and add a the logo to one of the slide images), and it looks like I didn’t remove the background image at :30 I’m hoping to only rely on the slide image/s, and not the background image for the slider (Home Slide vs Home Slider) hierarchy visible at :33 at the bottom of the screen.

Thank you for going to the trouble of helping me, I don’t want to steal away your morning with this, but i swear it’s not as difficult as I’m making it.

Thanks again!!

No worries, I missed what you meant in the first post, but you can do it, as long as the images are the same size in each slide… as described.

https://cl.ly/0l0O3K0R172C

It’s PM here anyway so no worries there :wink:

:joy: Now you can hear my awful accent! I’m trying to speak slowly too, sorry if I’m a bit quick!

Haha ok but still, you could be taking a walk or something, so thank you!!!

No problem, you have my dad’s accent :slight_smile:

Gonna give everything you’ve mentioned a shot (heck of thing to inherit a previously made site, all kinds of rats nest’s to unravel), again I really appreciate the help and I’ll start to attack this, have a great night on the other side of the pond!

Good luck with it!

If you’re sticking around the forums for a while why not pop into the intro section, those flotillas look amazing!

A great community with loads of people on hand and willing to help!

Yeah I can’t believe the previous iteration of the website wasn’t using that picture, going to try and get the rest of the photography optimized and uploaded (its for a client/friend of the office), and I’ll check out the introduction area when I finally finish wrestling with this slider, thanks again for everything!

1 Like