Resize image width in function of set image height in CSS?

Question

I'm trying to tell an image to be displayed with a maximum height of 400 pixels, and a width adapted onto the used height, with the following CSS - Code:

span.itemImage img {
    max-height:400px;
    width:auto;
}

With the code above, images don't exceed the height of 400 px; that works perfectly, but their width doesn't get adapted in function of the height they have. Anyone knows how to program that properly in CSS ?

Illustration of the image in full size and normal mode:

Now when I insert the CSS-code above with the max-height set to let's say 50px (took such a small value to clearly visualize the issue), the result is :

So you can clearly see that the width of the image stayed the same, instead of being adapted in function of the height (which is in this case 50 px). Any help? I don't want any cropping to occur, just that the width of the image is set in function of the height the image has.

Answer 1

It's maybe not the best solution, but with this little CSS-modification it works. Proper CSS-Code:

span.itemImage img {
    max-height:400px;
    width:auto!important;
}