UIWebView's property scalesPageToFit = YES not working correctly on larger images

Question

In an iphone app i have a webview in which i want to preview some image downloaded from internet, my problem is that the some images are not viewed as to fit in the frame of webview, but most do. I think this is due to the fact that those images are too large. Am i doing something wrong? Please help

What i want is simply loading image in webview to fit the frame of webview. You can provide me some other code, but need to be regarding webview not imageview.

Here is the code i am using.

self.documentData = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.folio3.com/corp/wp-content/uploads/2013/02/Entrance_A-3.jpg"]];
self.webView.scalesPageToFit = YES;
[self.webView loadData:self.documentData MIMEType:@"image/jpeg" textEncodingName:@"utf-8" baseURL:nil];

Plus here is the screenshot of output (clearly shows scroll indicators i-e image is not fit in webview's frame) Output Screenshot

If anyone wants a better answer along the same lines as Ammar's: http://stackoverflow.com/a/4670989/1861181 — Morkrom, Sep 17 '13 at 00:36
You could try using WKWebView instead of UIWebView, it worked for me in a similar case. — Leszek Szary, Apr 11 '18 at 12:43

score 4 · Answer 1 · answered May 22 '13 at 05:54

4

First Check and set frame of UIWebView in viewDidLoad: like bellow..

webView.frame = self.view.frame;

after use this Delegate method and set scalesPageToFit property like bellow..

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    webView.scalesPageToFit = YES;//set here
    return YES;
}

answered May 22 '13 at 05:54

Paras Joshi

20,427
11
57
70

@iMemon see this answers and try that also http://stackoverflow.com/questions/2350135/uiwebview-wont-zoom-even-after-setting-scalespagetofit-to-yes :) – Paras Joshi May 22 '13 at 06:18

score 1 · Answer 2 · answered Jan 09 '17 at 20:58

This solution builds on the answer from Ammar Hasan. Instead of the original...

NSData *data = [NSData dataWithContentsOfURL:imageURL];
[self.webView loadData:data MIMEType:@"image/jpeg" textEncodingName:@"utf-8" baseURL:nil];

...you can do this:

NSString *photoWrapper = [NSString stringWithFormat:@"\
 <html>\n\
    <head>\n\
        <meta name=\"viewport\" content=\"width=device-width\" />\n\
        <style type=\"text/css\">\n\
            body {\n\
                margin: 0;\n\
                padding: 0;\n\
            }\n\
            img {\n\
                width: 100%%;\n\
            }\n\
        </style>\n\
    </head>\n\
    <body>\n\
        <img src=\"%@\" />\n\
    </body>\n\
</html>\
", URL];
[self.documentView loadHTMLString:photoWrapper baseURL:nil];

Now the image is scaled to the width of the web view, even when the web view is less than half the width of the image, which seems to be a limit that UIWebView imposes otherwise. The image can still be scaled by the user, which I wanted. You can override that by adding minimum-scale and maximum-scale to the viewport meta tag.

score 0 · Accepted Answer · answered May 22 '13 at 07:04

Try using html content for WebView, like the following code

<html>
<head>
   <title>Title</title>
</head>
<body style='margin:0px; padding:0px;'>
   <img src='<your_image_url>' 
        style='max-width:320px; max-height:460px;' 
        alt='Your_Image_Name'/>
</body>
</html>

To re-size image use CSS (cascaded style sheet) styling, play with the these style properties in image style attribute

max-width, min-width, width, max-height, min-height & height

OK but where in the iOS does this go? How is it implemented ? — Morkrom, Sep 17 '13 at 00:34

UIWebView's property scalesPageToFit = YES not working correctly on larger images

3 Answers3