Can Android's WebView automatically resize huge images?

前端未结

关注

 8  1793

心在旅途

In some web browsers, huge images are automatically resized to fit the screen.

Is it possible to do the same in an Android WebView?

The web page just contain

相关标签:

8条回答

独厮守ぢ

2020-11-28 06:16

If your WebView width is fill_parent then you can use this code:

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 height is fill_parent.

0 讨论(0)

渐次进展

2020-11-28 06:17
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.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
```
You can add extra margins/padding later to get the spacing right.
0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2020-11-28 06:22

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

works but is deprecated. This is another solution without LayoutAlgorithm.SINGLE_COLUMN, using 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>";
}

0 讨论(0)

不要未来只要你来

2020-11-28 06:24
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

死守一世寂寞

2020-11-28 06:24

I faced the same problem and used Jsoup to help me out and add the required respected CSS. You can easily add attributes or 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:

// 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

Have fun!

0 讨论(0)

攒了一身酷

2020-11-28 06:34

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

0 讨论(0)

1 2 下一页