Responsive image scaling by the height of the window

Question

In the same way that setting an image to:

img {max-width: 100%;}

Such as in: https://jsfiddle.net/kvp7n29n/10/ ... scales the image proportionally when you make the browser window's width become smaller, How do I get the same scaling effect to happen when the browser's height becomes smaller?

The end effect I'm trying to accomplish is just like what you see on many responsive lightboxes, such as this: http://dimsemenov.com/plugins/magnific-popup/ .

^^ I'm not necessarily wanting to make the lightbox itself, but notice when you click on a single image demo there, the lightbox comes up with the image, and no matter if you shrink the browser window's width or height, the image in the lightbox stays proportional while shrinking down.

So how do I get that same proportional scaling effect to happen on that kitten in my jsfiddle above? .

Answer 1

You can set the max-height and width in vh(viewport height) and vw(viewport width) units. Fiddle: https://jsfiddle.net/kvp7n29n/12/

img {
    max-width: 100vw;
    height:auto;
    width:auto;
    max-height:100vh;
}