title: Constraining image size with max-width and max-height depending on which is true first
body: <p>Trying to figure out a way where I can have portrait and landscape images adjust to viewport size with max-height and max-width scenarios.</p>
  
  <p>The images should keep 100% width as long as the width doesn't exceed 1050px. Another constrainer is that images should be 800px in height at most. So whichever is "true" first should constrain the size of the image.</p>
  
  <p>If I set <code>max-width: 1050px</code> and <code>max-height: 800px;</code> then the aspect ratio of the image is messed up. (As seen in the demo below). There's also the problem that the image width will be wider than the actual image (the portrait image of 836px width will upscale to 1050px). Is this possible to control with just CSS?</p>
  
  <p><a href="http://jsbin.com/ejANoTa/1" rel="noreferrer"><strong>Demo</strong></a></p>