title: UIWebView with just an image that should fit the whole view
body: <p>So the issue I'm having now is with UIWebViews displaying a single image.
  What I'd like is the image to be reduced if it doesn't fit the place, and keep it's original size if not.
  So here is how I do it (in a UIViewController):</p>
  
  <pre><code>- (void)viewDidLoad {
      [super viewDidLoad];
      UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)];
      NSString *path =[[NSBundle mainBundle] bundlePath];
      NSURL *baseUrl =[NSURL fileURLWithPath:path];
  
      NSString *html = [NSString stringWithFormat:@"&lt;html&gt;&lt;head&gt;"
  //THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE
          "&lt;script&gt;document.ontouchstart = function(event) { event.preventDefault();  }&lt;/script&gt;"
          "&lt;/head&gt;&lt;body style=\"text-align:center;margin:0;padding:0\"&gt;"
          "&lt;img src=\"banner.gif\" /&gt;"
          "&lt;/body&gt;"
          "&lt;/html&gt;"];             
  
      webView.scalesPageToFit = YES;
      [webView loadHTMLString:html baseURL:baseUrl]; 
      [self.view addSubview:webView];
      [webView release];
  }
  </code></pre>
  
  <p>This crops the image and makes the webview scrollable, which is not the desired behavior.</p>
  
  <p>So I started trying with some CSS int the image tag :</p>
  
  <pre><code>"&lt;img style=\"width:100%\" src=\"banner.gif\" /&gt;"
  </code></pre>
  
  <p>or</p>
  
  <pre><code>"&lt;img style=\"max-width:100%\" src=\"banner.gif\" /&gt;"
  </code></pre>
  
  <p>I don't know why, but 100% doesn't seem to be the width of the UIView, it's really small ! (the source image in the view is bigger than 320px, and here's the result :)</p>
  
  <p><img src="https://i.stack.imgur.com/h0plU.png" alt="Too Small Image"></p>
  
  <p>So I tried seting the body's width :</p>
  
  <pre><code>        "&lt;/head&gt;&lt;body style=\"width:100%;text-align:center;margin:0;padding:0\"&gt;"
          "&lt;img style=\"width:100%\" src=\"banner.gif\" /&gt;"
  </code></pre>
  
  <p>And what that does is just preventing the "text-align" property to work.
  I tried also removing the text-align, because if the width fits the view, it's unnecessary, but it still doesn't work.
  I also tried set an image size to the view's width, but it doesn't work on retina devices then…
  I tried to set a viewport to device-width, but it doesn't change.</p>
  
  <p>Any idea on how to do this ?</p>
  
  <p>Here is <a href="http://stoeffler.cc/TestCenterWV.zip" rel="nofollow noreferrer">a little sample with 3 images I'd like to fit, in case you have time to have a look</a></p>