How to fit an image 100% to the screen

As the title suggests i want to know how i fit for example an image 100% to the screen.

Thanks in advance.

Hey @DharmaNode

You want the picture to be 100% width or 100% height or both?

-Ahmad

I just want the hero image to fit the entire screen like so:

In this case the picture with the leopard seal fits to the entire window.

Here you go set the width to 100vw and height to 100vh

Hope this helps

Best
Ahmad

If i set the width and the height of the entire section to 100% it just dissapears. I had already tried that but it wont work.

Can you please provide me a read only link here is how: How to Enable a Webflow Share Link :smile:

This is just a test site:
https://preview.webflow.com/preview/theswan-bd1433?preview=a92dc9a212c5c368f834ac7f6215e43d

But it’s not the project that’s wrong. It’s either how i interpret your instructions or your instructions in general :smile:

Hey @DharmaNode

If you are going to use percentages for the height you will need to add 100% height to the body element. Or you can do what @Ahmadz839 suggested and use 100vw for the width and 100vh for the height on the image.

1 Like

Here you go @DharmaNode: http://nimb.ws/pNO5J6 :smile:

Best
Ahmad

1 Like

Thanks so much!

Just for my knowledge, what does vw and vh stand for? I didn’t even know they existed :grinning:

It means Viewport Height and Viewport Width :smile:

If you want to learn more about units check this out: http://www.w3schools.com/cssref/css_units.asp

Best
Ahmad

Thanks for the help, i just didn’t know what vw and vh was haha.

2 Likes

Aha! Thanks for the quick response.

1 Like

Glad i could help :smile:

-Ahmad

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