전체보기에 맞게 이미지 만있는 UIWebView

그래서 지금 가지고있는 문제는 단일 이미지를 표시하는 UIWebViews 때문입니다. 내가 원했던 것은 그것이 장소에 맞지 않는다면 이미지를 축소하고 그렇지 않다면 원래 크기로 유지하는 것입니다. 그래서 여기 내가 (A의 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]; 
}

이 이미지를 자르고 원하는 동작하지 않습니다 스크롤 웹보기를합니다.

은 그래서 일부 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\" />"

그리고 무엇을 그 단지를 방해하지를 "text-align"속성이 작동합니다. 너비가 뷰에 맞으면 불필요하지만 여전히 작동하지 않기 때문에 텍스트 정렬을 제거해 보았습니다. 또한 뷰의 너비로 이미지 크기를 설정해 보았지만 망막 장치에서는 작동하지 않습니다. 장치 너비로 뷰포트를 설정하려고했지만 바뀌지 않았습니다.

어떻게하는지에 대한 아이디어가 있으십니까? 여기

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

출처

2011-01-12 Julien

업데이트입니다 : 내가 필요가 설정되어 있지 자바 스크립트 함께 할 수있는 더 좋은 방법을 발견 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

안녕하세요, 저는 웹 뷰로 작업하고있는 것을 보았습니다. 최근 SDK 4.2를 사용하고 있다고 생각합니까? 지금까지 전체 webview의 크기를 조정해야 했습니까? 그렇다면 어떻게 했습니까? 온라인에서 두 가지 가능한 솔루션을 찾았습니다. 둘 다 4.2에서 작동하지 않았습니다. 어떤 경험이 있다면, 그것을 공유 주셔서 감사합니다 :) – Shade

사실 내가 콘텐츠가로드 된 후 webview의 크기를 조정하지 않습니다. 이 경우에는 webview를 다시로드합니다. 당신이 언급 한 2 가지 해결책을 나눌 수 있습니까? 어쩌면 나는 너의 필요를 오해 했어. 또한, 네, 하위 호환성을 가진 4.2 SDK를 사용합니다 – Julien

업데이트 된 버전은 아마도 StackOverflow IMHO에서 가장 유용한 답변입니다! :-) –

하나의 좋은 감사하겠습니다 간단한 솔루션은 HTML에 <head> 태그이 코드를 삽입하는 것입니다 : 여기에 줌 스케일을 정의 할 수 있습니다

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

을 너비.

출처

2011-05-19 16:39:15

전체보기에 맞게 이미지 만있는 UIWebView

답변

관련 문제