• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9142
  • Last Modified:

Autoresize image on iPhone in UIWebView


I built an iPhone application that loads *.png files (located in Resources) in a UIWebView. The reason to do so, is that I can easily have the user resize the image by multitouch (pinching).

The original image is larger than the UIWebView size, but it is automatically resized to fit. The problem is that it is now too small, it does not fill the screen. So I tried the UIView's autoresizingMask property:

imageView.autoresizingMask       = UIViewAutoresizingFlexibleWidth;

and the UIWebView's scalesPagesToFit property:

imageWebView.scalesPageToFit = YES;

None of them provide the result. Funny is that just an easy double tap on the screen is enough, so apparently the app does know how to handle the image if the user makes the request.

How can I have the app make this request at run time when loading the image, so the user sees an image that is fitted to the width of the screen.

ZIP file with code can be downloaded from:

Looking forward to your suggestions,

Pieter Kubben, MD
// Create url string for image file
NSString *imageName = [[NSBundle mainBundle] pathForResource:@"test_image" ofType:@"png"];

// Load image in UIWebView
NSURL *url = [NSURL fileURLWithPath: imageName];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL: url];

// Try automatic resize (to screen width)
// -- DOES NOT WORK --
imageView.autoresizingMask	 = UIViewAutoresizingFlexibleWidth;
imageWebView.scalesPageToFit = YES;

// Perform request
[imageWebView loadRequest: urlRequest];

Open in new window

  • 2
1 Solution
pieter78Author Commented:
Solved! With help of a hint at: http://www.iphonedevsdk.com/forum/iphone-sdk-development/34708-how-stretch-image-cover-whole-uiwebview.html

See the code snippet: I replaced loading the image by loading a HTMLstring, that includes a reference to the image, but also sets its size. One catch: setting the width to 100% did not work for me, the image became even smaller. However, it did work when setting the UIWebView's scalesToFit property to NO, but then the image could not be zoomed - which is a requirement for my case.

So I experimented a bit with fixed width values, and 900 works fine for my goal (at leas on the simulator).

Seems to work fine this way... :-)

// Create URL string for image file location
NSString *imageName	 = [[NSBundle mainBundle] pathForResource:@"test_image" ofType:@"png"];
NSURL	 *imageURL	 = [NSURL fileURLWithPath: imageName];
// Create HTML string from image URL
// Width-value is arbitrary (and found experimental): 900 works fine for me
NSString *htmlString = @"<html><body><img src='%@' width='900'></body></html>";
NSString *imageHTML  = [[NSString alloc] initWithFormat:htmlString, imageURL];
// Load image in UIWebView
imageWebView.scalesPageToFit = YES;
[imageWebView loadHTMLString:imageHTML baseURL:nil];

Open in new window

pieter78Author Commented:
By the way, a more detailed post on this topic is now available on my weblog:


Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now