Streaming live at 10am (PST)

Images not optimising to different screen size

#1

Hi everybody,

I’m a new webflow user. I’m trying really hard to optimise my background Hero image and slider image. Depending on the screen size, it’s either stretched horizontally or vertically. Where am I going wrong and how can I correct it?

Please help!

Thank you.


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

#2

Hi Rohan,

Try using the cover function in the background menu panel of the section. Then you can use the sliders to adjust position.


#3

Hello @ChieraCreative ,

Although it looks perfect on my computer, as always (screenshot 1).

It doesn’t look right on my colleague’s computer (screenshot 2).

This is the problem I’m facing - Image optimisation for different screen sizes.

#4

@RohanGanachari For this I would recommend playing with the aspect ratio - Try fixing the image to the bottom of the section and increasing to 80vh

No cutoff on my end with a 24" screen

One trick you can try is zooming out on your browser to replicate a larger screen

#5

@ChieraCreative,

I did exactly as you showed me.

Here’s a zoomed out screenshot. Perfect on my computer.

Here’s the same image on my friend’s computer.

I don’t want it at 80VH because I need the part of the next section showing up.

#6

@RohanGanachari I do see that it’s no longer stretching on you. Unfortunately, that’s going to be more related to the aspect ratio of the screen and the actual image being used.

#7

@ChieraCreative The original image dimensions are 1190 x 700 px. I re-sized the image by increasing height to 2380 x 1400 px and 3570 x 2100 px. But I’m experiencing the same issue.

Any ideas on what else I can do?

#8

@RohanGanachari On a wider screen, the field of view will be narrower therefore cropping more of the image. The only options would be to increase the height of the div, use a container with margins which would cause the image to not span the screen or use a picture that is zoomed out a bit more.