Android Webview, Scaling Image to Fit the Screen

Android WebView, Scaling Image to fit the screen

I had the same issue and doing this worked just fine:

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);

Edit:
As this remained as the accepted answer, here is a better solution (all credit to Tony below):

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

Android Webview - Scale image to fit screen properly with one loadUrl

If you are using a WebView, a meta tag with the viewport is expect (this way, it can calculate stuff like width with pixel values, even during load and failures). Add <meta name="viewport" content="width=device-width, initial-scale=1"> on the <head> of your document. This should fix some issues.

How to fit web images to Android screen size inside a WebView? while getting content of a site using JSON data, using restful

I have finally solved it by setting the style tag with the web content.

webViewLoader.setLoadDataWithBaseUrl("<style>img{display: inline;height: auto;max-width: 100%</style>"+ParentObject.getJSONObject("content").getString("rendered"));

If someone wants to add any more style just add <style></style> after or before <style>img{display: inline;height: auto;max-width: 100%</style>

How to fit images in WebView in Android

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

Webview image fit screen in Android

you are html image tag wrong check below code:

Display display = getWindowManager().getDefaultDisplay();
int width= display.getWidth();

Toast.makeText(getApplicationContext(), ""+width, Toast.LENGTH_LONG).show();

String html = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
   html+= "<body><img width=\""+width+"\" src=\""+"image.jpg"+"\" /></body></html>";

aboutText.loadDataWithBaseURL("file:///android_res/drawable/", html, "text/html","UTF-8" , null);

your html string wrong formatted image tag like below code:

String html = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
html+= "<body><img width=\""+width+"\"<img src=\""+"image.jpg"+"\" /></body></html>";

formatted my code:

String html = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
html+= "<body><img width=\""+width+"\" src=\""+"image.jpg"+"\" /></body></html>";

Android - Webview - rotate image and scale to fit page width

The solution was not easy, but finally I found it.
OK, this does exactly solve my question.

As a BONUS there is also a Html/Javascript button to rotate the image.

It consists of (1) the loadDataWithBaseUrl statement, (2) the string parts.

The load part:

WebView infoT = (WebView)rootView.findViewById( R.id.picture_show);
infoT.getSettings().setDefaultTextEncodingName("utf-8"); 
infoT.getSettings().setSupportZoom(true);
infoT.getSettings().setBuiltInZoomControls(true);
infoT.getSettings().setJavaScriptEnabled( true);
infoT.loadDataWithBaseURL( null, htmlTextPart1 + pictureFile + htmlTextPart2, "text/html", "utf-8", null);

The htmlTextPart1 and htmlTextPart2 strings are given below. For readability I give you only the HTML code parts. You can put them in strings.

String htmlTextPart1 =

<html>  
<head>  
<style>  
#container {width:100%;overflow:hidden;}  
#container.rotate90,#container.rotate270 {height:100%;}  
#image {  
    transform-origin: top left;  
    -webkit-transform-origin: top left;  
    -ms-transform-origin: top left;  
    -moz-transform-origin: top left;  
    -o-transform-origin: top left;  
    max-width: 100%; width:100%; height: auto;  
    //  height: 1600 ... gives a large picture
}  
#container.rotate90 #image {  
   transform: rotate(90deg) translateY(-100%);  
   -webkit-transform: rotate(90deg) translateY(-100%);  
   -moz-transform: rotate(90deg) translateY(-100%);  
   -o-transform: rotate(90deg) translateY(-100%);  
   -ms-transform: rotate(90deg) translateY(-100%);  
    max-height: 100%; height:100%; width: auto;  
}  
#container.rotate180 #image {  
    transform: rotate(180deg) translate(-100%,-100%);  
    -webkit-transform: rotate(180deg) translate(-100%,-100%);  
    -moz-transform: rotate(180deg) translate(-100%,-100%);  
    -o-transform: rotate(180deg) translate(-100%,-100%);  
    -ms-transform: rotate(180deg) translateX(-100%,-100%);  
    max-width: 100%; width:100%; height: auto;  
}  
#container.rotate270 #image {  
    transform: rotate(270deg) translateX(-100%);  
    -webkit-transform: rotate(270deg) translateX(-100%);  
    -moz-transform: rotate(270deg) translateX(-100%);  
    -o-transform: rotate(270deg) translateX(-100%);  
    -ms-transform: rotate(270deg) translateX(-100%);  
    max-height: 100%; height:100%; width: auto;  
}  
</style>  
<script>  
var angle = 0;  
function rotateImageClockwise() {  
    img = document.getElementById('container');  
    angle = (angle+90)%360;  
    img.className = "rotate"+angle;  
}  
</script>  
</head>
<body>  
<input id="clickMe" type="button" value="Rotate image" onclick="javascript:rotateImageClockwise();" /></br>  
<div id="container"><img src="file://"

String part 2:

id="image" /></div>
</body>  
</html>

Can Android's WebView automatically resize huge images?

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.

Android - Webview scale image to fit biggest dimension

Try #5 Worked!!!

        int iMW = imgView.getMeasuredWidth();
        int iMH = imgView.getMeasuredHeight();
        //Had the imw and iw backward...same for height
        int scW = (int) ((iMW / (float)iW) * 100); 
        int scH = (int) ((iMH / (float)iH) * 100);
        int fScale = 0;
        if (iMW < iW && iMH < iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        if (iMW < iW && iMH > iH)
        {
            fScale = scW;
        }
        if (iMW > iW && iMH < iH)
        {
            fScale = scH;
        }
        //had signs backwards...DUH
        if (iMW > iW && iMH > iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        wView.setInitialScale(fScale);
        wView.loadUrl(pUrl);

Android Webview, Scaling Image to Fit the Screen