Constraining image size with max-width and max-height depending on which is true first

Question

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.

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.

If I set max-width: 1050px and max-height: 800px; 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?

Demo

Answer 1

You may use the CSS3 viewport units to achieve this, though actual browser support is still a bit limited.

Answer 2

With some help from a friend I was able to solve this, however it is not 100% what I was looking for, but for the question I asked, I guess it fits.

Have a look HERE.