view raw
Toadfish Toadfish - 6 months ago 48
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

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:

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.


Does this meet your needs?

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


Edit: Made answer simpler.