How can I proportionally scale images to max-width?

Question

In a UIWebView, I am using the CSS max-width property to scale images of unknown size to fill a space no larger than (but perhaps smaller than) 300 pixels wide. Some of the original images are larger, and others are smaller.

For now, I'm using the following CSS declaration, which scales the width correctly, but tends to blow out the height of larger images in the iOS WebView:

 img{
    max-width:300px;
    margin:10px;
    padding:0px;
 }

So the question is: What's the correct way to ensure the height scales proportionally along with the width?

(Edited headline and tags to generalize solution. Thanks, matt!)

Answer 1

You want something like this:

  img {
    max-width:300px; 
    height:auto
  }

This really has nothing to do with iOS or UIWebView - it's pure standard CSS.

Answer 2

I don't have the reputation points to add comments to the responses, so I'll list it here:

img { max-width:300px; height:auto }

This line of CSS works on Chrome, Firefox and IE, but it only works on desktop browsers. As stated in the original question, the task is to set up proportional images in iOS; and on iOS Safari, this method doesn't work.