Fit image of random size into a UIWebview (IOS)

Question

I want to fit large image into UIwebview with keeping image ratio same as image view.

How can i do it.?

My code as follows to fit image in Uiwebview. if image is large then display is not good.

                CGFloat screenWidth = self.view.frame.size.width;
                CGFloat screenHeight = self.view.frame.size.height;

                NSString *htmlString = [NSString stringWithFormat:@"%@", @"<html><head><meta name='viewport' content='user-scalable=yes,width=device-width'></head><body bgcolor='000000'><img src='%@' width='%f' height='%f' style='max-width:200% max-height:200%'></body></html>"];
                imageHTML  = [[NSString alloc] initWithFormat:htmlString, fileUrl, screenWidth, screenHeight];

        [Webview loadHTMLString:imageHTML baseURL:nil];
        [imageHTML release];

Why are you using a web view to show an image? Why not use a `UIImageView`? — Stephen Darlington, Oct 08 '14 at 08:18
when i used UIImageView memory is using more.Runtime memory issue is coming with iPod4 device. — Sabareesh, Oct 08 '14 at 08:20
if image is big (2000 * 3000) then only i am using UIwebview. otherwise i am using UIImageView. — Sabareesh, Oct 08 '14 at 08:23
Can you not resize the image before displaying it? There's not much value on trying to display such a big image on an iPhone. — Stephen Darlington, Oct 08 '14 at 08:46

score 19 · Accepted Answer · answered Oct 09 '14 at 11:02

I have used below code and its working well.

   NSString *imageHTML = [[NSString alloc] initWithFormat:@"%@%@%@", @"<!DOCTYPE html>"
                                 "<html lang=\"ja\">"
                                 "<head>"
                                 "<meta charset=\"UTF-8\">"
                                 "<style type=\"text/css\">"
                                 "html{margin:0;padding:0;}"
                                 "body {"
                                 "margin: 0;"
                                 "padding: 0;"
                                 "color: #363636;"
                                 "font-size: 90%;"
                                 "line-height: 1.6;"
                                 "background: black;"
                                 "}"
                                 "img{"
                                 "position: absolute;"
                                 "top: 0;"
                                 "bottom: 0;"
                                 "left: 0;"
                                 "right: 0;"
                                 "margin: auto;"
                                 "max-width: 100%;"
                                 "max-height: 100%;"
                                 "}"
                                 "</style>"
                                 "</head>"
                                 "<body id=\"page\">"
                                 "<img src='",fileUrl,@"'/> </body></html>"];

                [wview_contents loadHTMLString:imageHTML baseURL:nil];

I have found I just needed to add the img {max-width: 100%} to the style to make this work — Steve Reed Sr, Feb 29 '16 at 05:51
works perfect. I think this is only valid solution I have come across so far . I have tried a lot of them to fit the image in the web view , but each one has its issues or drawbacks. — Ankit J, Jun 27 '17 at 09:58

score 5 · Answer 2 · answered Dec 22 '16 at 16:08

To load image in Swift 3.0 from application document directory in a UIWebView with his expected ratio -

if let dir = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first {
            let path = dir.appendingPathComponent(imageName)
            
            
            
        let fullHTML = "<!DOCTYPE html>" +
            "<html lang=\"ja\">" +
            "<head>" +
            "<meta charset=\"UTF-8\">" +
            "<style type=\"text/css\">" +
            "html{margin:0;padding:0;}" +
            "body {" +
            "margin: 0;" +
            "padding: 0;" +
            "color: #363636;" +
            "font-size: 90%;" +
            "line-height: 1.6;" +
            "background: black;" +
            "}" +
            "img{" +
            "position: absolute;" +
            "top: 0;" +
            "bottom: 0;" +
            "left: 0;" +
            "right: 0;" +
            "margin: auto;" +
            "max-width: 100%;" +
            "max-height: 100%;" +
            "}" +
            "</style>" +
            "</head>" +
            "<body id=\"page\">" +
            "<img src='\(path)'/> </body></html>"
            
            imgWbView.loadHTMLString(fullHTML, baseURL: nil)
}

Great answer. Works perfectly. Thanks – rmvz3 May 07 '17 at 18:26 — rmvz3, May 07 '17 at 18:26

Kampai · Answer 3 · 2014-10-08T09:24:51.153

4

Set your WebView page to scale fit:

[webView setScalesPageToFit:YES];

EDIT:

Here check these two lines also

CGFloat screenWidth = self.view.frame.size.width;
CGFloat screenHeight = self.view.frame.size.height;

If you know what size you want them pass static values here, will fix your problem.

e.g.

CGFloat screenWidth = 300;
CGFloat screenHeight = 300;

edited Oct 08 '14 at 09:24

answered Oct 08 '14 at 08:54

Kampai

22,848
21
95
95

I used it but not worked. wview_contents.scalesPageToFit = YES; wview_contents.autoresizesSubviews = YES; – Sabareesh Oct 08 '14 at 08:56
Can you please post a ScreenShot for that – Kampai Oct 08 '14 at 08:58
I did test for image resolution 2448x3264. Check it by passing static values in screenWidth and screenHeight. – Kampai Oct 08 '14 at 09:33
if i set the value based on the orientation then may be work. – Sabareesh Oct 08 '14 at 10:00
@Kampai Could you please help me to solve my issue https://stackoverflow.com/questions/44151187/uiwebview-zooming-pdf-and-large-images-zoom-by-defaults-ios – Prashant Tukadiya May 26 '17 at 12:57

score 3 · Answer 4 · answered Mar 27 '15 at 06:42

The following code snippet may help you

NSString *fontString = @"<!DOCTYPE html><html>\
    <head>\
    <style>\
    img{";
        NSString *imageDimensionsStr = [NSString stringWithFormat:@"max-width: %fpx; max-height: %fpx;}",self.view.frame.size.width - 50.0f, self.view.frame.size.height/2];
        fontString =[fontString stringByAppendingString:imageDimensionsStr];
fontString = [fontString stringByAppendingString:@"</style></head><body>"];
    fontString = [[fontString stringByAppendingString:htmlString] stringByAppendingString:@"</body></html>"];
    [webView loadHTMLString:fontString baseURL:nil];

The above code will resize the width and height of the image according to view dimension. You can change according to your requirement.

This is the best solution for me, as I need to display some HTML text from a RESTful API. In fact, I use "max-width: 100%" instead of "max-width: ... max-height". using percentage works so well that even rotating to landscape work as expected. — John Pang, Jul 24 '16 at 19:32

score 2 · Answer 5 · edited Jan 30 '21 at 07:48

This works for me to fit the image size within width of device for Swift 5
Helpful with dynamic html from server

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
   
    let fontAdjust = "var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

    let imgAdjust = "var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"
webKitView.evaluateJavaScript(imgAdjust)

    webKitView.evaluateJavaScript(fontAdjust)
    webKitView.evaluateJavaScript(imgAdjust)
}

identical answer as in here? https://stackoverflow.com/questions/26295277/wkwebview-equivalent-for-uiwebviews-scalespagetofit/65965373#65965373 — Martin Brisiak, Jan 30 '21 at 07:49

Fit image of random size into a UIWebview (IOS)

5 Answers5

Linked