How can I resize the height of an image to crop with the browser window?

I have an image that I want to cover the full window of my browser upon loading the website. I've got it so that, as the width of the browser window increases or decreases, the image is resized while preserving the center alignment and aspect ratio by cropping out on either side. However, I want it so that, as the height of the browser window increases or decreases, the image is cropped from the bottom so that the bottom of the image always lines up with the bottom of the browser window and the top of the image is never cut off. In other words, when I scroll down, there should be no more image beneath the browser window to scroll over. I have the following HTML and CSS code:

How can I do this, ideally without JavaScript? Also, I got the CSS from a guide on filling the browser window with an image, and I don't know why the min-width in the HTML is specifically set to 1024px.

Update:

Description specific to your code: You need to remove the <img> inside the .hs-slide container and instead use a background-image. After adding the background-image to .hs-slide (see code below), the .hs-slide element needs a height to be visible. You can either explicitly set one or let the element adapt to the height of its content. For the latter you would need to remove all positioning from .hs-slide-caption and give it a padding-top and padding-bottom. For simplicity I've set an explicit height in the example:

The background-attachment: fixed I mentioned in the first version of my comment is not needed as you want the image to scroll with your page.

By the way: as you have two background-images now, one being part of the .hs-slide-overlay, you could try getting rid of the overlay by combining the two background-images by using the notation for multiple background-images.

Old answer:

I am not completely sure but it sounds like what you want can be achieved by using a CSS background-image. I can't think of a Javascript-free solution using the HTML img tag.

You need to add the background-image to any element that stretches to the full width and height of the viewport and then set the appropriate attributes, most importantly background-size and background-position.