Android WebView, Scaling Image to fit the screen

Question

What I have: I'm loading image from a URL. I simply do (WebView).loadUrl(imageurl, extraheaders)

What I get: Image is not showing at full width of the WebView, it has blank space all around (like if you open a little iamge in your desktop browser)

What i tried: Setting LayoutAlgorithm to SINGLE_COLUMN. Works perfect, but zooming doesn't work. (I have it enabled in the WebView.getSettings() Dont know why. Setting setUseWideViewPort(true); load image without any blanks space, but it is fully zoomed in.

Answer 1

You could also do something like this.

Add CSS style for img at the beginning (depends on your web data format) of your data string.

<style>img{display: inline; height: auto; max-width: 100%;}</style>

To quickly do it to data in WebView i did this.

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);

It's pretty much like what bansal21ankit said, but instead it will work on every image in your HTML without extra work.

---

Edit (clarification on post content):

You can have any text/html value instead of post.getContent() from the example.

Post content here is just an example of a text/html content which is loaded from some data source and then concatenated with the style part which makes any image in given content to fit the screen.