Autoresize image on iPhone in UIWebView

Posted on 2010-01-10
Medium Priority
Last Modified: 2012-05-08

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

Question by:pieter78
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2

Accepted Solution

pieter78 earned 0 total points
ID: 26288440
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


Author Comment

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


Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn new improvements released by Google for Google Calendar. Noted in this article are simple tips and tricks that can make your everyday use of Google Calendar better.
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question