Fit image in webview

Question

I am planning to display images from SD card in a webview in order to take advantage of he built in zoom capabilities of webview. However, I am facing an issue with displaying images that are bigger than screen size (e.g. 1800x1200) to fit the screen initially, like in an ImageView. I want the image to be displayed in full at first and provide zoom control to the users. I have tried using WRAP_CONTENT for webview's width and height, but that does not work. Any ideas? Following is a code snippet I am using:

    String path = getRealPathFromURI(mUriList.get(0)); // this gets the file path
    webView = (WebView) findViewById(R.id.WebView01);
 WebSettings settings= webView.getSettings();
 settings.setBuiltInZoomControls(true);
 settings.setSupportZoom(true);     
 webView.loadUrl("file://" + path);

Possible duplicate of [Can Android's WebView automatically resize huge images?](http://stackoverflow.com/questions/3099344/can-androids-webview-automatically-resize-huge-images) — Dan Dascalescu, Dec 08 '15 at 17:25

score 9 · Answer 1 · answered Jul 06 '11 at 10:16

 private WebView mWebView2;
    mWebView2 = (WebView)findViewById(R.id.webview);
    mWebView2.getSettings().setJavaScriptEnabled(true);
    mWebView2.getSettings().setLoadWithOverviewMode(true);
    mWebView2.getSettings().setUseWideViewPort(true);
    mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    mWebView2.setScrollbarFadingEnabled(true);
    mWebView2.loadDataWithBaseURL("file:///android_asset/", "<img src=\"banner5.png\" height=\"98%\" width=\"100%\"/>", "text/html", "utf-8", null);

Images are in the assets folder

score 5 · Answer 2 · answered Jun 05 '14 at 23:56

5

If you write your HTML correctly, you don't have to do any "setLoadWithOverviewMode", "setUseWideViewPort" or "setInitialScale". And there is absolutely no reason to enable JavaScript.

This one line worked for me:

webView.loadDataWithBaseURL("file://" + directory, "<img src=\"" + name + "\" width=\"100%\"/>", "text/html", "utf-8", null);

The underlining HTML code is:

<img src=YourImage.png width="100%" />, by not setting a height, its aspect ratio will be kept.

answered Jun 05 '14 at 23:56

WSBT

33,033
18
128
133

Not setting a height (or overriding it to `auto`) [worked for me](https://github.com/FezVrasta/bootstrap-material-design/issues/768) as well. – Dan Dascalescu Dec 08 '15 at 17:47

score 3 · Answer 3 · answered Jan 15 '11 at 15:25

3

That did the trick for me:

webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);

answered Jan 15 '11 at 15:25

JochenJung

7,183
12
64
113

score 0 · Answer 4 · edited Jun 19 '15 at 11:34

0

WebSettings settings = webView.getSettings();

settings.setUseWideViewPort(true);

settings.setLoadWithOverviewMode(true)

edited Jun 19 '15 at 11:34

benka

4,732
35
47
58

answered Jun 19 '15 at 11:17

Nikhil Borad

2,065
16
20

Fit image in webview

4 Answers4

Linked