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.