如何在Android中的WebView中调整图像

Question

I want use webview in my application and in my webView is show Text , Images .
I can show Text and Images into webview but show me images very big and not fit screen !

I write below codes for webview :

            WebSettings settings = content_newsWebView.getSettings();
            content_newsWebView.setWebChromeClient(new WebChromeClient());
            content_newsWebView.getSettings().setDomStorageEnabled(true);
            content_newsWebView.getSettings().setAppCacheEnabled(true);
            content_newsWebView.getSettings().setAppCachePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/cache");
            content_newsWebView.getSettings().setDatabaseEnabled(true);
            content_newsWebView.getSettings().setDatabasePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/databases");
            content_newsWebView.getSettings().setJavaScriptEnabled(true);
            settings.setDefaultTextEncodingName("utf-8");
            content_newsWebView.loadData(response.body().getData().getDescription(), "text/html; charset=UTF-8", null);

My Json :

>     "description": "<p><span style=\"font-size:14px\">The Swedish star who played Mikael Blomkvist in thrillers based on Stieg
> Larsson&rsquo;s best-selling <strong>Millennium</strong> series,
> passed away on Tuesday.</span></p>\n\n<p><span
> style=\"font-size:14px\">According to his representative&rsquo;s
> statement, <a
> href=\"http://example.com/Celebrities/21240/michael_nyqvist\"><strong>Mr.
> Nyqvist</strong></a> died among his beloved ones in Stockholm
> following his battle with lung cancer.</span></p>\n\n<p><span
> style=\"font-size:14px\">&ldquo;On behalf of Michael Nyqvist&rsquo;s
> representatives and family, it is with deep sadness that I can confirm
> that our beloved Michael, one of Sweden&rsquo;s most respected and
> accomplished actors, has passed away quietly surrounded by family
> after a year long battle with lung cancer,&rdquo; read the
> statement.</span></p>\n\n<p><span style=\"font-size:14px\"><img
> alt=\"Michael Nyqvist in The Girl with the Dragon Tattoo with Noomi
> Rapace\"
> src=\"http://example.com/cpanel/uploads/news-picture/363/Mikael.jpg\"
> /></span><span style=\"font-size:11px\"><strong>Michael Nyqvist in The
> Girl with the Dragon Tattoo with Noomi
> Rapace</strong></span></p>\n\n<p><span style=\"font-size:14px\">The
> popular Swedish actor mostly became popular for playing opposite <a
> href=\"http://example.com/Celebrities/10116/noomi_rapace\"><strong>Noomi
> Rapace</strong></a> in <a
> href=\"http://example.com/Movies/292/the_girl_who_played_with_fire\"><strong>The
> Girl Who Played with Fire</strong></a>, <a
> href=\"http://example.com/Movies/291/the_girl_with_the_dragon_tattoo\"><strong>The
> Girl with the Dragon Tattoo</strong></a> and <a
> href=\"http://example.com/Movies/293/the_girl_who_kicked_the_hornets_nest\"><strong>The
> Girl Who Kicked the Hornet&rsquo;s Nest</strong></a>. <a
> href=\"http://example.com/Celebrities/1/daniel_craig\"><strong>Daniel
> Craig</strong></a> later played the character in the American
> adaptation of <a
> href=\"http://example.com/Movies/1168/the_girl_with_the_dragon_tattoo\"><strong>The
> Girl with the Dragon Tattoo</strong></a>.</span></p>\n\n<p><span
> style=\"font-size:14px\"><a
> href=\"http://example.com/Celebrities/21240/michael_nyqvist\"><strong>Michael
> Nyqvist</strong></a> was also known for playing villains in Hollywood
> hits including his role against <a
> href=\"http://example.com/Celebrities/10341/keanu_reeves\"><strong>Keanu
> Reeves</strong></a> in <a
> href=\"http://example.com/Movies/26468/john_wick\"><strong>John
> Wick</strong></a> and the nuclear scientist in <a
> href=\"http://example.com/Celebrities/10132/tom_cruise\"><strong>Tom
> Cruise</strong></a>&rsquo;s <a
> href=\"http://example.com/Movies/613/mission_impossible_-_ghost_protocol\"><strong>Mission:
> Impossible &mdash; Ghost Protocol</strong></a>.</span></p>\n\n<p><span
> style=\"font-size:14px\">Born in Stockholm in 1960, <a
> href=\"http://example.com/Celebrities/21240/michael_nyqvist\"><strong>Mr.
> Nyqvist</strong></a> is survived by his wife and two children, Ellen
> and Arthur.&nbsp;</span></p>\n",

How can I fix it and show images fit the screen?

Answer 1

Try this one it works for me.

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>";
}

Now just call the above getHtmlData like this.

webViewBlog.getSettings().setJavaScriptEnabled(true);
webViewBlog.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webViewBlog.getSettings().setDomStorageEnabled(true);
webViewBlog.getSettings().setAllowFileAccessFromFileURLs(true);
webViewBlog.getSettings().setAllowUniversalAccessFromFileURLs(true);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
   webViewBlog.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
}
else
{
   webViewBlog.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
}    

webViewBlog.loadDataWithBaseURL(null, getHtmlData(myHtmlContent)), "text/html", "utf-8", null);

Answer 2

Use this code

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebSettings settings = mWebView.getSettings();
  WebSettings.LayoutAlgorithm layoutAlgorithm = WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING;
  settings.setLayoutAlgorithm(layoutAlgorithm);
}