How to fit an image 100% to the screen

Design help General
#1

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

Thanks in advance.

#2

Hey @DharmaNode

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

-Ahmad

#3

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.

#4

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

Hope this helps

Best
Ahmad

#5

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.

#6

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

#7

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:

#8

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
#9

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

Best
Ahmad

1 Like
#10

Thanks so much!

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

#11

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

#12

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

2 Likes
#13

Aha! Thanks for the quick response.

1 Like
#14

Glad i could help :smile:

-Ahmad

#15

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