Streaming live at 10am (PST)

Resizing Images to fit viewport


#1

Hey all,

I was having problems with resizing my main image, the slider to resize with height when making the browser smaller. Any tips would be welcome. I’ve tried having the image as a percentage. The images scale ok, its the slider outline itself which doesn’t move in height?

https://preview.webflow.com/preview/toms-first-project-f3a65a?utm_source=toms-first-project-f3a65a&preview=b8411fb6c7832bc8f5b14d9f3e566ce2

Thanks,
Tom


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Why do you fix the height of the slider and slider mask to the VH? Shouldn’t you do it by VW instead?


#3

ahh good point. it worked better.

but still, when i make it smaller. i still get a grey background and the text in the slider box, becomes separate from the image . any clues?


#4

The most reliable way of ensuring the slider takes the height of the images, is by actually using images instead of background images. All the images will of course have to be pre-cropped to the same dimensions before uploading, then unset slider & mask’s height styles.

Otherwise, instead of using background-size:contain, use cover instead.