UIWebView 只有一个应该适合整个视图的图像-移动开发问题

UIWebView with just an image that should fit the whole view(UIWebView 只有一个应该适合整个视图的图像)

本文介绍了UIWebView 只有一个应该适合整个视图的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我现在遇到的问题是 UIWebViews 显示单个图像.我想要的是如果图像不适合该位置，则将其缩小，如果不适合则保持其原始尺寸.所以这是我的做法(在 UIViewController 中):

So the issue I'm having now is with UIWebViews displaying a single image. What I'd like is the image to be reduced if it doesn't fit the place, and keep it's original size if not. So here is how I do it (in a UIViewController):

- (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];
}

这会裁剪图像并使 webview 可滚动，这不是所需的行为.

This crops the image and makes the webview scrollable, which is not the desired behavior.

所以我开始尝试在图片标签中使用一些 CSS:

So I started trying with some CSS int the image tag :

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

或

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

不知道为什么，100%好像不是UIView的宽度，真的很小！(视图中的源图像大于 320px，结果如下:)

I don't know why, but 100% doesn't seem to be the width of the UIView, it's really small ! (the source image in the view is bigger than 320px, and here's the result :)

所以我尝试设置身体的宽度:

So I tried seting the body's width :

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

这样做只是阻止了文本对齐"属性的工作.我还尝试删除文本对齐，因为如果宽度适合视图，则没有必要，但它仍然不起作用.我还尝试将图像大小设置为视图的宽度，但它不适用于视网膜设备......我尝试将视口设置为设备宽度，但它没有改变.

And what that does is just preventing the "text-align" property to work. I tried also removing the text-align, because if the width fits the view, it's unnecessary, but it still doesn't work. I also tried set an image size to the view's width, but it doesn't work on retina devices then… I tried to set a viewport to device-width, but it doesn't change.

你知道怎么做吗?

这里是一个小样本，我想放 3 张图片，以防你有时间看

推荐答案

更新:我找到了一个更好的方法来用 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];

旧版本(虽然效果不好)

我不喜欢回答我自己的问题，但我很兴奋我发现了这个问题的解决方案！

I don't like answering my own question, but I'm so excited I discovered the solution to this issue !

所以基本上你需要这样做:

So basically what you need to do this :

用它的真实最终需要的帧初始化视图:

Init the view with it's real final desired frame :

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

添加一个视口属性，并将图像宽度设置为该属性(我选择1200px，因此它比所有可能的设备都大，并且不会拉伸内容两次)带有ontouchstart的脚本只是为了防止滚动观点并得到 Apple 的批准.

Add a viewport property, and set the image width to this property (I choose 1200px so it's bigger than all possible devices, and will not stretch the content twice) The script with the ontouchstart is just to prevent scrolling from the view and being approved by 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];

告诉视图缩放它的内容以适应:

Tell the view to scale it's content to fit :

webView.scalesPageToFit = YES;

然后你就可以加载你的东西了！如果您以后需要以编程方式调整视图的大小，我不知道该怎么做，我可能必须这样做，如果我知道怎么做，我会在这里发布.如果您知道如何或有更好的解决方案，我将不胜感激

Then you can load your stuff ! I don't know how to do if you need to resize the view programatically later, I might have to do it and will post here if I figure out how. If you know how, or have a better solution, I'd appreciate the solution

这篇关于UIWebView 只有一个应该适合整个视图的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！