CODEWITHSUNDEEP
htmliosimageuiwebview
Fire Fist
Fire Fist

Reputation: 7050

How to make fit size only for Image in UIWebView?

I loaded HTML to my UIWebView that including both Text and Images.

Text is fit to UIWebView and Images are not fit to UIWebView.

It's too large in UIWebView.

It's showing scroll bar at the end of the UIWebView.

I want to adjust image fit size in UWebView. So i tested with following codes.

self.myWebView.scalesPageToFit = YES;

However it's fixed including Text and Text is too small to read and Images are fixed.

I want to set Text Normally and only want to fit size Image in UIWeView.

How can i do it?

Upvotes: 6

Views: 7280

Answers (3)

ajay_nasa
ajay_nasa

Reputation: 2298

I have solve this problem using css. The css contained within the style tags below will make sure to automatically resize your images maintaining aspect ratio for the width of the UIWebView. Hope this helps!

NSString *strTemplateHTML = [NSString stringWithFormat:@"<html><head><style>img{max-width:100%%;height:auto !important;width:auto !important;};</style></head><body style='margin:0; padding:0;'>%@</body></html>", @"insert your html content here"];

[webView loadHTMLString:strTemplateHTML baseURL:nil];

Upvotes: 10

prodeveloper
prodeveloper

Reputation: 950

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.

Upvotes: 0

Rocker
Rocker

Reputation: 1269

Use the viewport meta tag is used by UIWebView on the iPhone/iPad to determine how to display a web page. 

 <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

refer below link for more details:

https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Upvotes: 5

Related Questions