Streaming live at 10am (PST)

How to fit an image 100% to the screen


#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:
https://gyazo.com/6c6a5c72b8746e5e4614b6e93128d989

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: http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573/13 :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.


#9

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

Best
Ahmad


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


#13

Aha! Thanks for the quick response.


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