前言
记得曾经有好多人问过我webview加载到的图片太大了，超过了屏幕的宽度，怎么办呢？在笔者写这篇文章之前，也没有真正去验证过是否可行，只是告诉大家通过JS去设置css样式。
今天，也在segmentFault上看到有人也提了这样一个问题，因此决定亲自去测试一下，并分享给大家！
HTML代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head></head> <body> <h1>Test Img how to auto fit webview</h1> <img src="http://pic.nipic.com/2007-12-15/2007121519169400_2.jpg"></img> <h2>Another image</h2> <img src="http://www.zg2sc.cn/upfile/pic/2014/05/14/5f80fc3a258940998f921953269d1960141058011295091_163227633232_2.jpg"></img> <h2>Third image</h2> <img src="http://www.jydoc.com/uploads/jydoc/p35501/20091292046379677801.jpg"></img> </body> </html>
|
适应前图片太大
在网上随便找了几张大图，在适应之前，图片是远远大过屏幕的大小的，我们这里通过JS来实现图片自适应大小。在适应屏幕大小之前的效果图如下：
如何通过js实现图片自适应屏幕呢？
适应后图片显示合适
图片自适应后的效果图如下：
我们只需要在webview的代理中实现注入js代码来设置图片的css就可以了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ var imgs = document.getElementsByTagName('img'); \ for (var i = 0; i < imgs.length; ++i) {\ var img = imgs[i]; \ img.style.maxWidth = %f; \ } \ }"; js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];
[webView stringByEvaluatingJavaScriptFromString:js]; [webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"]; }
|
当然，我们这里获取了屏幕的宽度，然后设置成图片的最大宽度为屏幕的宽度-20。
最后
如果我的问题不清楚，可以到https://segmentfault.com/q/1010000002693677看看问题，当然这里只是一种方式来实现，其实还有很多的方式可以实现的，不过都需要依靠JS来实现的。
比如，我们可以通过JS获取所有的图片的URL然后本地去加载图片，将图片裁剪成适应后应该的图片的大小，这样既可以缓存到本地，又可以自适应。
源代码
请大家到我的GITHUB下载DEMO：WebViewImgAutoFit
喜欢就star一下!