CSS: Image to have "Fixed" height, max-width, and maintain aspect ratio?

Question

I have a set of pictures, each with different heights and widths that I want to put into a div tag. I want the picture to try to have a fixed height, unless the width exceeds a fixed amount, whereby I want the height to shrink to maintain the aspect ratio. I tried:

.ArtistPic
{
    height: 660px;
    max-width: 720px;
}

This fixes the height but if the image goes beyond 720px width, it squishes the picture horizontally and does not maintain the aspect ratio. Suggestions?

Edit: Maybe a better way of putting this is I'd like the picture to expand to one of those sizes and maintain the aspect ratio.

Answer 1

Does this meet your needs?

.ArtistPic {
    max-width: 720px;
    max-height: 660px;
}

See http://jsfiddle.net/7s9wnjse/1/.

Edit: Made answer simpler.