Responsive image scaling to window height
Just like setting the image:
img {max-width: 100%;}
For example, at https://jsfiddle.net/kvp7n29n/10/ ... scales the image proportionally when you shrink the width of the browser window, How do I get the same zoom effect when the browser height gets smaller ?
The end effect I'm trying to accomplish is similar to what you see on many sensitive lightboxes, for example: http://dimsemenov.com/plugins/magnific-popup/ .
^^ I don't necessarily want to make the lightbox itself, but notice that when you click on a single image demo, an image appears in the lightbox, and it doesn't matter if you reduce the width or height of the browser window, the image in the lightbox remains proportional when compressed.
So how do I get the same proportional scaling effect that happens on this kitty in my jsfiddle above ?.
source to share
You can set the maximum height and width in units of vh (viewport height) and vw (viewport width). Fiddle: https://jsfiddle.net/kvp7n29n/12/
img {
max-width: 100vw;
height:auto;
width:auto;
max-height:100vh;
}
source to share