UIWebView只有一个适合整个视图的图像
Jul*_*ien 2 html css iphone uiwebview
所以我现在遇到的问题是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,这是结果:)
所以我试着设置身体的宽度:
"</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">"
"<img style=\"width:100%\" src=\"banner.gif\" />"
这样做只是阻止"text-align"属性起作用.我也尝试删除text-align,因为如果宽度适合视图,则没有必要,但它仍然不起作用.我也尝试将图像大小设置为视图的宽度,但它不适用于视网膜设备然后...我试图将视口设置为设备宽度,但它不会改变.
有关如何做到这一点的任何想法？
Jul*_*ien 14
更新:我发现使用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];
旧版本(虽然效果不好)
我不喜欢回答我自己的问题,但我很兴奋,我发现了这个问题的解决方案!
基本上你需要这样做:
使用它真正的最终所需帧初始化视图:
Run Code Online (Sandbox Code Playgroud)webView = [[UIWebView alloc] initWithFrame:_desiredFrame];添加一个视口属性,并将图像宽度设置为此属性(我选择1200px,因此它比所有可能的设备都大,并且不会将内容拉伸两次)带有ontouchstart的脚本只是为了防止从视图滚动并获得批准苹果.
Run Code Online (Sandbox Code Playgroud)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];告诉视图缩放它的内容以适应:
Run Code Online (Sandbox Code Playgroud)webView.scalesPageToFit = YES;
然后你可以加载你的东西!如果你需要稍后以编程方式调整视图大小,我不知道怎么办,我可能不得不这样做,如果我弄清楚如何会在这里发布.如果您知道如何或有更好的解决方案,我会很感激解决方案
- 如果你遇到"无效转换speficier"的问题,那么复制它的百分比"<body style = \"margin:0; width:100 %%; height:100 %%; \">" (2认同)
| 归档时间： |
|
| 查看次数： |
13332 次 |
| 最近记录： |