Can't figure out how to crop image to window height

I’m making the portfolio project, and I want to have a navbar at the top, and an image occupying the rest of the window.

Please take a look at how it is currently:

So I want the image to resize horizontally to fit the window, but vertically, I want the image to be cropped to fit exactly the window height, so the rest of the page appears as soon as the user give the first tick on their mouse wheel.

I tried everything but I can’t seem to figure out how to do that.

I think using a background image is the easiest way.

I removed the image and created a div with a background image: http://codepen.io/benjaminvanzwienen/pen/qRXzwe

1 Like

Oh I see. Thank you. Didn’t know about “vh”. So what I get from this is that if you manipulate the height of a img tag element, it will resize, but if you manipulate the height of something else with a background-image, the resizing of that element will hide the rest of the image if necessary.