Question

所以我现在遇到的问题是UIWebViews显示单个图像。我想要的是如果图像不适合该地方则要缩小图像，如果没有则保持原始尺寸。所以这是我如何做到的（在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可滚动，这不是理想的行为。

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

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

或

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

我不知道为什么，但100％似乎不是UIView的宽度，它真的很小！（视图中的源图像大于320px，结果如下：）

Too Small Image

所以我试着设置身体的宽度：

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

这样做只是阻止“text-align”属性起作用。我也尝试删除text-align，因为如果宽度适合视图，则没有必要，但它仍然不起作用。我也尝试将图像大小设置为视图的宽度，但它不适用于视网膜设备... 我试图将视口设置为设备宽度，但它不会改变。

关于如何做到这一点的任何想法？

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

Answer 1

更新：我发现使用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;
```

然后你可以加载你的东西！如果你需要稍后以编程方式调整视图大小，我不知道该怎么做，我可能不得不这样做，如果我弄清楚如何会发布在这里。如果你知道如何，或者有更好的解决方案，我会很感激解决方案

Answer 2

一个简单明了的解决方案是将此代码放在HTML <head>标记上：

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

您可以在此定义缩放比例和宽度。

UIWebView只有一个适合整个视图的图像

2 个答案: