Android 的 WebView 可以自动调整大图像的大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3099344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can Android's WebView automatically resize huge images?
提问by Nicolas Raoul
In some web browsers, huge images are automatically resized to fit the screen.
在某些 Web 浏览器中，巨大的图像会自动调整大小以适合屏幕。
Is it possible to do the same in an Android WebView?
是否可以在 Android WebView 中执行相同的操作？
The web page just contains the image, maybe adding some JavaScript could do the trick?
Anybody has already done this?
网页只包含图像，也许添加一些 JavaScript 可以解决问题？
有人已经这样做了吗？
Note: I don't know the size of the image in advance.
注意：我事先不知道图像的大小。
回答by Sheharyar
Yes, it's possible. You can try setting the WebView Layout using the code below. It resizes all Images (Greater than the Device Screen Width) to the Screen Width. This works for both Orientations (Portrait and Landscape)
是的，这是可能的。您可以尝试使用以下代码设置 WebView 布局。它将所有图像（大于Device Screen Width）调整为屏幕宽度。这适用于两个方向（纵向和横向）
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
You can add extra margins/padding later to get the spacing right.
您可以稍后添加额外的边距/填充以获得正确的间距。
回答by Yair Kukielka
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
works but is deprecated. This is another solution without LayoutAlgorithm.SINGLE_COLUMN, using CSS:
有效但已弃用。这是另一个没有 LayoutAlgorithm.SINGLE_COLUMN 的解决方案，使用 CSS：
@SuppressLint("NewApi")
private openWebView() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);
} else {
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
}
String data = "<div> your HTML content </div>";
webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
}
private String getHtmlData(String bodyHTML) {
String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}</style></head>";
return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}
回答by AndyB
You could use this:
你可以用这个：
WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
Found this solution here: How to set the initial zoom/width for a webview
在此处找到此解决方案： How to set the initial zoom/width for a webview
回答by Patrick de Kleijn
You can have the browser resize the image for you to fit the maximum width of the screen:
您可以让浏览器为您调整图像大小以适应屏幕的最大宽度：
<img src="huge-image.jpg" width="100%" />
Resizing its height to WebView's viewport is possible too:
也可以将其高度调整为 WebView 的视口：
<img src="huge-image.jpg" height="100%" />
However, resizing both width and height would result in a stretched image. To either resize the width or height depending of what side fits best you may consider a bit of JavaScript, like this:
但是，同时调整宽度和高度的大小会导致图像被拉伸。要根据最适合的一侧调整宽度或高度的大小，您可以考虑使用一些 JavaScript，如下所示：
<img src="huge-image.jpg" onload="resize(this);" />
<script type="text/javascript">
function resize(image)
{
var differenceHeight = document.body.clientHeight - image.clientHeight;
var differenceWidth = document.body.clientWidth - image.clientWidth;
if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
if (differenceWidth < 0) differenceWidth = differenceWidth * -1;
if (differenceHeight > differenceWidth)
{
image.style['height'] = document.body.clientHeight + 'px';
}
else
{
image.style['width'] = document.body.clientWidth + 'px';
}
// Optional: remove margins or compensate for offset.
image.style['margin'] = 0;
document.body.style['margin'] = 0;
}
</script>
回答by Dmitry Zaytsev
If your WebViewwidth is fill_parentthen you can use this code:
如果您的WebView宽度是fill_parent那么您可以使用此代码：
Display display=getWindowManager().getDefaultDisplay();
int width=display.getWidth();
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />";
webView.loadData(data, "text/html", "utf-8");
And zoom still working!
变焦仍然有效！
Same method if heightis fill_parent.
相同的方法如果height是fill_parent。
回答by Paul Spiesberger
I faced the same problem and used Jsoupto help me out and add the required respected CSS. You can easily add attributesor CSS. I my case, I download from many sources various different HTML files, save them and then display them in a Webview. Here is how I parse the HTML before I save it to the database with Kotlin:
我遇到了同样的问题，并使用Jsoup来帮助我并添加所需的受尊重的 CSS。您可以轻松添加属性或 CSS。就我而言，我从许多来源下载各种不同的 HTML 文件，保存它们，然后在 Web 视图中显示它们。以下是我在使用 Kotlin 将 HTML 保存到数据库之前解析 HTML 的方式：
// Parse your HTML file or String with Jsoup
val doc = Jsoup.parse("<html>MY HTML STRING</html>")
// doc.select selects all tags in the the HTML document
doc.select("img").attr("width", "100%") // find all images and set with to 100%
doc.select("figure").attr("style", "width: 80%") // find all figures and set with to 80%
doc.select("iframe").attr("style", "width: 100%") // find all iframes and set with to 100%
// add more attributes or CSS to other HTML tags
val updatedHTMLString = doc.html()
// save to database or load it in your WebView
Have fun!
玩得开心！
回答by Michael Assraf
My favorite's :
我最喜欢的 ：
String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>";
webview.loadData(data, "text/html; charset=UTF-8", null);
回答by Roland
You could send the size you want in the request parameters and let the server set the width/height in the img element for you.
您可以在请求参数中发送您想要的大小，并让服务器为您设置 img 元素中的宽度/高度。
