Geek Answers Handbook

UIWebView with an image that should fit the whole view

So, the problem that I am currently facing is displaying UIWebViews with a single image. I would like the image to be scaled down if it doesn't fit the place, and keep it in its original size if not. So, here is how I do it (in a UIViewController):

- (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:@"<html><head>" //THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE "<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" "</head><body style=\"text-align:center;margin:0;padding:0\">" "<img src=\"banner.gif\" />" "</body>" "</html>"]; webView.scalesPageToFit = YES; [webView loadHTMLString:html baseURL:baseUrl]; [self.view addSubview:webView]; [webView release]; }

This crop the image and makes scrollable web browsing, which is not the desired behavior.

So, I started using the CSS image tag:

 "<img style=\"width:100%\" src=\"banner.gif\" />"

or

 "<img style=\"max-width:100%\" src=\"banner.gif\" />"

I don’t know why, but 100% does not seem to be the width of the UIView, it is really small! (the original image in the view is more than 320 pixels, and here is the result :)

Too small image

So, I tried to set the width of the body:

  "</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">" "<img style=\"width:100%\" src=\"banner.gif\" />"

And what that means is simply interfering with the text-align property. I also tried to remove the text alignment, because if the width matches the view, it is not needed, but it still does not work. I also tried to set the image size to the width of the view, but it does not work on retina devices, then ... I tried to set the viewport to the width of the device, but it does not change.

Any idea on how to do this?

Here is a small sample with 3 images that I would like to place if you have time to look

+2
source share
2 answers

UPDATE: I found a better way to do this using Javascript, no need to set sizeToFit

 NSString *htmlString = [NSString stringWithFormat: @"<html>" "<head>" "<script type=\"text/javascript\" >" "function display(img){" "var imgOrigH = document.getElementById('image').offsetHeight;" "var imgOrigW = document.getElementById('image').offsetWidth;" "var bodyH = window.innerHeight;" "var bodyW = window.innerWidth;" "if((imgOrigW/imgOrigH) > (bodyW/bodyH))" "{" "document.getElementById('image').style.width = bodyW + 'px';" "document.getElementById('image').style.top = (bodyH - document.getElementById('image').offsetHeight)/2 + 'px';" "}" "else" "{" "document.getElementById('image').style.height = bodyH + 'px';" "document.getElementById('image').style.marginLeft = (bodyW - document.getElementById('image').offsetWidth)/2 + 'px';" "}" "}" "</script>" "</head>" "<body style=\"margin:0;width:100%;height:100%;\" >" "<img id=\"image\" src=\"%@\" onload=\"display()\" style=\"position:relative\" />" "</body>" "</html>",url ]; [webView loadHTMLString:htmlString baseURL:nil];

Old version (not working well, though)

I do not like to answer my question, but I am so excited that I found a solution to this problem!

So basically what you need to do:

  • Initiate a view with it the real final desired frame:

     webView = [[UIWebView alloc] initWithFrame:_desiredFrame];

  • Add a viewport property and set the image width for this property (I choose 1200px so that it is larger than all possible devices and does not stretch the content twice). a script using ontouchstart is just to prevent scrolling in terms of and approving Apple.

     NSString *html = [NSString stringWithFormat:@"<html><head>" "<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" "<meta name=\"viewport\" content=\"width=1200\"/>" "</head>" "<body style=\"margin:0;padding:0;\">" "<img style=\"width:1200px\" src=\"%@\" />" "</body>" "</html>",imageName];

  • Tell us how to scale its contents:

     webView.scalesPageToFit = YES;

Then you can upload your stuff! I don’t know how to do this, if you need to resize the view programmatically later, I may have to do it and post here if I find out how to do it. If you know how or get a better solution, I would appreciate a solution

+14
source

One nice and simple solution is to put this code in your HTML <head> :

 <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" />

Here you can define the zoom scale and width.

+2
source

More articles:


All Articles