How to make an image resize to the screens height with CSS?

Unlike many people who want an image to fill out the whole screen, I only care about the image height. How can I use CSS (preferably not JavasScript) to make an image with any size, fill up to 100% of the maximum possible browser window height while keeping aspect ratio of the image, the re-sized width of the image in respect to the browser does not matter.

I'm working with this html:

<div class="images">
  <img/>
</div>

Thank you 开发者_JAVA百科so much!

---

img { height:100% }

or if you want to be explicit

img { height:100%; width:auto; }

height 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
width 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/1/

EDIT:

This answer needed some attention. The demo was broken and generally a mess. I've updated it with new images, updated rule to compensate for the inline nature of images, and normalized height and width of the body and html elements.

---

This might be overkill:

.img {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
}

---

You might also want to take a look at the vh, vw, vmin and vmax CSS units – which are pretty well supported. There's a good article describing how to achieve 100% height here.

BTW – beware of whitespace: this can add an unwanted margin. Removing the space, adding a float, or using the font-size: 0 hack will sort this out. Also, when using other methods, remember to set height: 100% for the body and html elements.