Android的WebView可以自动调整大图的大小吗？答案

【问题标题】：Can Android's WebView automatically resize huge images?Android的WebView可以自动调整大图的大小吗？
【发布时间】：2011-03-07 04:11:02
【问题描述】：

在某些网络浏览器中，巨大的图像会自动调整大小以适应屏幕。

是否可以在 Android WebView 中做同样的事情？

网页只包含图像，也许添加一些 JavaScript 可以解决问题？
有人已经这样做了吗？

注意：我事先不知道图片的大小。

【问题讨论】：

标签： android image resize webview

【解决方案1】：

是的，这是可能的。您可以尝试使用下面的代码设置 WebView 布局。它将所有图像（大于Device Screen Width）的大小调整为屏幕宽度。这适用于两个方向（纵向和横向）

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

您可以稍后添加额外的边距/填充以获得正确的间距。

【讨论】：

+1 我还没试过，但听起来很完美，比使用 JavaScript 更好。
工作，在 2.2.1、3.2 和 4.0.3 上测试。 minSdkVersion="8"targetSdkVersion="15" 和 android-support-v4.jar。非常简单有效！
我喜欢这个解决方案，但我发现 SINGLE COLUMN 已被弃用。如果有人知道原因，请指出。
@m039 - SINGLE_COLUMN 已弃用，但这是不使用 CSS 的唯一方法。就 YouTube 视频而言，它们在我的设备上运行良好。（在 Nexus 7 (4.1) 和 Galaxy Nexus (4.0, 4.1, 4.2) 上测试）
所以.. Android 4.4 杀死了 LayoutAlgorithm.SINGLE_COLUMN。有人找到替代品吗？

【解决方案2】：

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

有效但为deprecated。这是另一个没有 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>";
}

【讨论】：

+1 确实 LayoutAlgorithm.SINGLE_COLUMN 似乎已被弃用，因此 Sheharyar 的解决方案变得不那么有吸引力了......
很好的解决方案！谢谢！
带有自动宽度/高度的额外 CSS 行在 5.0 Lollipop 上具有魔力
最佳解决方案.. 效果很好，谢谢.. :) 但我也卡在 youtube 链接中.. 这段代码最适合图像和文本，但它不能改变 youtube 链接的宽度.. 你能帮帮我。
这行得通。我添加了webview_image.settings.builtInZoomControls = true 以允许用户也可以放大和缩小。

【解决方案3】：

你可以用这个：

WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

在这里找到了这个解决方案： How to set the initial zoom/width for a webview

【讨论】：

现在可以使用，因为早期的选项已被弃用并且不再起作用

【解决方案4】：

您可以让浏览器为您调整图像大小以适应屏幕的最大宽度：

<img src="huge-image.jpg" width="100%" />

也可以根据 WebView 的视口调整其高度：

<img src="huge-image.jpg" height="100%" />

但是，同时调整宽度和高度的大小会导致图像被拉伸。要根据最适合的一侧调整宽度或高度，您可以考虑使用一些 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>

【讨论】：

这很好用，但它会放大缩放。知道任何解决方法吗？
如果你resize only the width，高度会按比例调整。

【解决方案5】：

我遇到了同样的问题并使用Jsoup 来帮助我并添加所需的受人尊敬的 CSS。您可以轻松add attributes 或 CSS。我的情况是，我从许多来源下载各种不同的 HTML 文件，保存它们，然后在 Webview 中显示它们。这是我在使用 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

Add Jsoup to your project

玩得开心！

【讨论】：

【解决方案6】：

如果您的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");

缩放仍然有效！

如果height 是fill_parent，则方法相同。

【讨论】：

@NicolasRaoul 我在 Android 4.0.3 上测试过 - 比例相同
有意思，我一定要试试！

【解决方案7】：

我最喜欢的：

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);

【讨论】：

【解决方案8】：

您可以在请求参数中发送您想要的尺寸，并让服务器为您设置 img 元素中的宽度/高度。

【讨论】：

问题是我事先不知道图片的大小。