Toadfish Toadfish - 1 month ago 16
CSS Question

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

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

Does this meet your needs?

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

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

Edit: Made answer simpler.