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:

HTML:

 <div class="hs-slide hs-slide-count<?php echo $i; ?>">
      <div class="hs-slide-overlay"></div>
      <img src="<?php echo esc_url($hashone_slider_image); ?>" class="banner">
      <div class="hs-slide-caption">
        <div class="hs-slide-cap-title animated fadeInLeft">
          <?php echo esc_html($hashone_slider_title); ?>
        </div>

        <div class="hs-slide-cap-desc animated fadeInRight">
          <?php echo esc_html($hashone_slider_subtitle); ?>
        </div>
      </div>
    </div>

CSS:

img.banner{
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.banner {
left: 50%;
margin-left: -512px;   /* 50% */
  }
}

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.

Solution

Update:

Example: https://jsfiddle.net/jbx8nco4/4/

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:

.hs-slide {
  height: 800px;
  background-image: url(http://placekitten.com/1000/500); /* replace with your image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

The shorthand notation of this code would be:

background: url(//placekitten.com/1000/500) center top / cover no-repeat;

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.

body {
  width: 100%;
  height: 100%;
  background-image: url(//placekitten.com/1000/500);
  background-repeat: no-repeat;
  background-size: cover; // cover the whole area with the image
  background-position: top; // expand image from the top
  background-attachment: fixed;
}

The shorthand version for the background properties would be:

background-image: url(//placekitten.com/1000/500) no-repeat top fixed;
background-size: cover;

Here is a live example: https://jsfiddle.net/jbx8nco4/2/

Keep in mind, that background-size: cover is not supported by older browsers.

For further information and more techniques on using background-images for covering the full page see: https://css-tricks.com/perfect-full-page-background-image/