title: Responsive Image Resize in Popup ... Tall images get cutoff
body: <p>So, I have a popup that opens for a gallery. The width of the image in the popup is set to 100%, stretching to fit it's containing div. And, the height is set to auto, so the height will resize, depending on the width (same ratio). This is great for wide images ... but for tall images, the tall images get cutoff at the bottom of the page. If the height is too tall (and the image is cutoff), then I want the height to shrink to a different size, and the width to adjust. I tried max-height, but that skews the image ratio (shrinking the height, but not affecting the width). Anyone have a better solution?</p>
  
  <p>You can see the problem here:
  <a href="http://66.63.173.13/136-madison-place-ridgewood/#gallery" rel="nofollow noreferrer">Webpage</a></p>
  
  <p>Click the image of the outside white door, with the flower bushes (the 8th image). You will see that the image is too tall for the page, and gets cut off at the fold.</p>
  
  <p>Here is an image of the issue
  <img src="https://i.stack.imgur.com/GNjsC.jpg" alt="enter image description here"></p>
  
  <p>Any ideas?</p>