Adjust horizontal images to fit the window size

Design help Layout & Design
1

Hello,
Does anyone know if there’s an option to make horizontal images fit the window size (so they occupy the entire window without needing to scroll the image)? And is it possible to have this option only on the desktop version (to avoid weird cropping on the mobile version)?

Thanks in advance for your help.

2

Hey Massiera,

The CSS Unit “VW” is related to the View Width. 100VW would be 100% of the users viewport. Let me know if this is something you were looking for.

3

Hi RoryVB,

Thank you for your response.
Actually, I would like the first image on my project pages (portfolio site) to adjust to the window size, so there’s no need to scroll within the image. Like the first image on this site:

https://raffinerie.com/cases/helsana

Is it possible to do this? I would like to apply this setting only on the desktop version. On the mobile version, I prefer the images not to be cropped, as the cropping would be too awkward.

Thanks in advance for your help.

4

For that you could use “VH” Which stands for view height.

You won’t be able to avoid cropping since the perfect won’t be the exact same dimensions as the viewport width and height.

5

Thank you very much. Is it possible to set 100VH only for the desktop version? Could you tell me where to integrate this value? Is it possible to apply it only to specific images?

6

Yes, you can just put it back on auto for tablet. This style can be applied on the height input.

7

Thank you for your help.