CSS setting max-width AND max-height for an item

Question

I have an image with dimensions 335px X 891px.

I have CSS set to max-width:270px and max-height:530px The result I get is... The image does shrink and keep it's aspect ratio. It's shrinks to the width of 270px. This creates a height of 718px. I want my images to always stay within 270 and 530 though. It's ok for one number to be smaller, but not larger.

So, with this image, I would want the height to be 530. That would bring the width down to about 200. That would be ok because both numbers are now in the range I want.

Here's another example with a wide image... If my image was 1000 wide and 600 tall, that image would need to reduce to 270 x 160

How can I do this?