UIWebView僅適用於整個視圖的圖像

所以我現在遇到的問題是UIWebViews顯示單個圖像。我想要的是如果圖片不適合放置的地方，可以縮小圖片的大小，如果不適合，請保留原始大小。因此，這裏是我如何做到這一點（在一個UIViewController）：UIWebView僅適用於整個視圖的圖像

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)]; 
    NSString *path =[[NSBundle mainBundle] bundlePath]; 
    NSURL *baseUrl =[NSURL fileURLWithPath:path]; 

    NSString *html = [NSString stringWithFormat:@"<html><head>" 
//THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE 
     "<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" 
     "</head><body style=\"text-align:center;margin:0;padding:0\">" 
     "<img src=\"banner.gif\" />" 
     "</body>" 
     "</html>"];    

    webView.scalesPageToFit = YES; 
    [webView loadHTMLString:html baseURL:baseUrl]; 
    [self.view addSubview:webView]; 
    [webView release]; 
}

這裁剪圖像，使web視圖可滾動的，這是不期望的行爲。

於是我開始與一些CSS INT試圖圖像標籤：

"<img style=\"width:100%\" src=\"banner.gif\" />"

或

"<img style=\"max-width:100%\" src=\"banner.gif\" />"

我不知道爲什麼，但100％似乎沒有成爲的寬度UIView，它真的很小！（在視圖中源圖像比320像素更大，而這裏的結果:)

Too Small Image

所以，我想塞汀身體的寬度：

 "</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">" 
     "<img style=\"width:100%\" src=\"banner.gif\" />"

什麼，做只是預防「文本對齊」屬性工作。我也嘗試刪除文本對齊，因爲如果寬度適合視圖，這是不必要的，但它仍然無法正常工作。我也嘗試將圖像大小設置爲視圖的寬度，但它不適用於視網膜設備，然後... 我試圖將視口設置爲設備寬度，但它不會更改。

任何想法如何做到這一點？

這裏是a little sample with 3 images I'd like to fit, in case you have time to have a look

來源

2011-01-12 Julien

更新：我發現了一個更好的方式使用JavaScript來做到這一點，沒有必要設置sizeToFit

NSString *htmlString = [NSString stringWithFormat: 
         @"<html>" 
         "<head>" 
         "<script type=\"text/javascript\" >" 
         "function display(img){" 
         "var imgOrigH = document.getElementById('image').offsetHeight;" 
         "var imgOrigW = document.getElementById('image').offsetWidth;" 
         "var bodyH = window.innerHeight;" 
         "var bodyW = window.innerWidth;" 
         "if((imgOrigW/imgOrigH) > (bodyW/bodyH))" 
         "{" 
         "document.getElementById('image').style.width = bodyW + 'px';" 
         "document.getElementById('image').style.top = (bodyH - document.getElementById('image').offsetHeight)/2 + 'px';" 
         "}" 
         "else" 
         "{" 
         "document.getElementById('image').style.height = bodyH + 'px';" 
         "document.getElementById('image').style.marginLeft = (bodyW - document.getElementById('image').offsetWidth)/2 + 'px';" 
         "}" 
         "}" 
         "</script>"       
         "</head>" 
         "<body style=\"margin:0;width:100%;height:100%;\" >" 
         "<img id=\"image\" src=\"%@\" onload=\"display()\" style=\"position:relative\" />" 
         "</body>" 
         "</html>",url 
         ]; 


[webView loadHTMLString:htmlString baseURL:nil];

舊版本（不順利，雖然）

我不喜歡回答我自己的問題，但我很興奮，我發現了這個問題的解決方案！

所以基本上你需要做什麼：

初始化視圖與它的真正最終所需框架：

webView = [[UIWebView alloc] initWithFrame:_desiredFrame];

添加視口屬性，設置圖像寬度到這個屬性（我選擇1200px，因此它比所有可能的設備都大，並且不會將內容拉伸兩次）。使用ontouchstart的腳本只是爲了防止從視圖滾動並被Apple批准。

NSString *html = [NSString stringWithFormat:@"<html><head>" 
"<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" 
"<meta name=\"viewport\" content=\"width=1200\"/>" 
"</head>" 
"<body style=\"margin:0;padding:0;\">" 
"<img style=\"width:1200px\" src=\"%@\" />" 
"</body>" 
"</html>",imageName];

告訴視圖縮放內容以適應：
```
webView.scalesPageToFit = YES; 
```

然後你就可以加載你的東西！如果您需要稍後以編程方式調整視圖大小，我不知道該怎麼辦，我可能必須這樣做，並且如果我弄清楚如何在這裏發佈。如果你知道如何，或者有更好的解決辦法，我會很感激的解決方案

來源

2011-01-12 16:08:58 Julien

嗨，我看到你正在使用webviews，我想你使用的是最近的SDK 4.2？你有沒有必要調整整個網頁視圖的大小，如果是的話，你是怎麼做到的？我在網上發現了兩種可能的解決方案，這兩種解決方案都不適用於4.2。如果您有任何經驗，我將不勝感激您分享:) – Shade 2011-02-25 11:07:26

一個很好的和簡單的解決辦法是把這段代碼在你的HTML標記<head>：

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

在這裏，你可以定義變焦倍數和寬度。

來源

2011-05-19 16:39:15

UIWebView僅適用於整個視圖的圖像

回答

相關問題