Resize all images in a UIWebView above a certain width

0
votes

I'm developing an iPhone application which will show text and images from XML in webviews and place webviews over scrollview (each webview is a page). There are more than 100 images of different large sizes but i have placed my webview with a frame of 550 width and 500 height.

I found some images are more than 550 width so I'm getting problems when scrolling the to see the next page (meaning the next webview content).

I tried to set scalePageToFit for the webview but both the image and the text appear small .

Can anyone help to resize all webview image which are more than 550 pixels wide to a set width of 500 so that images will fit in the webview? Is that possible in JavaScript for iPhone or by any other means?

3
javascriptiphoneuiwebviewresize

3 Answers

5
votes

You could try prepending some CSS to whatever you're loading into the webview:

img {
  width: 500px;
  height: auto;
}

In Objective-C

NSString *cssString = @"<style type='text/css'>img {width: 500px; height: auto;}</style>";
NSString *htmlString = [NSString stringWithFormat:@"%@%@",cssString,myHTMLContent];
[myWebView loadHTMLString:htmlString];
1
votes
use this one  
  - (UIImage*)imageWithImage:(UIImage*)image 
                  scaledToSize:(CGSize)newSize
    {
        UIGraphicsBeginImageContext(newSize);
        [image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
        UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        return newImage;
    }
0
votes

Just as a supplement of NathanGaskin's answer, you can use "img {max-width: 500px; height: auto;}" if you don't want to resize the image(s) whose width is less than 500. For max-width, see: http://www.w3schools.com/cssref/pr_dim_max-width.asp