title: Responsive image scaling by the height of the window
body: <p>In the same way that setting an image to: </p>
  
  <pre><code>img {max-width: 100%;}
  </code></pre>
  
  <p>Such as in: <a href="https://jsfiddle.net/kvp7n29n/10/" rel="noreferrer">https://jsfiddle.net/kvp7n29n/10/</a>  ... scales the image proportionally when you make the browser window's <em>width become smaller</em>, <strong>How do I get the same scaling effect to happen when the browser's <em>height becomes smaller</em></strong>?</p>
  
  <p>The end effect I'm trying to accomplish is just like what you see on many responsive lightboxes, such as this: <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="noreferrer">http://dimsemenov.com/plugins/magnific-popup/</a>  .</p>
  
  <p>^^ 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 <em>width</em> or <em>height</em>, the image in the lightbox stays proportional while shrinking down. </p>
  
  <p>So how do I get that same proportional scaling effect to happen on that kitten in my jsfiddle above?  .</p>