Image fit screen in a WebView

In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with开发者_StackOverflow the path to my picture).

My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.

Is there a way to achieve it ?

Thanks.

If you are creaing the HTML code (which you say that you are), you can cheat:

In the html code:

img src="xxx" width="100% >

That did the trick for me:

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

What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:

width="100%"

So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:

public void setWebViewWithImageFit(String content){

        // content is the content of the HTML or XML.
        String stringToAdd = "width=\"100%\" ";

        // Create a StringBuilder to insert string in the middle of content.
        StringBuilder sb = new StringBuilder(content);

        int i = 0;
        int cont = 0;

        // Check for the "src" substring, if it exists, take the index where 
        // it appears and insert the stringToAdd there, then increment a counter
        // because the string gets altered and you should sum the length of the inserted substring
        while(i != -1){
            i = content.indexOf("src", i + 1);
            if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
            ++cont;
        }

        // Set the webView with the StringBuilder: sb.toString()
        WebView detailWebView = (WebView) findViewById(R.id.web_view);
        detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}

Hope this helps, it took me some hours to figure out how to solve this.

Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.

Personally, I think this solution is more elegant to your approach.

You can use a little jQuery in the web page to accomplish it as well.

Something like:

$(document).ready(function(){
   var windowWidth = $(window).width()+"px";
   $("#imagID").width(windowWidth);
});

I found a solution. Use this calculation:

device-width * (152 / density)

Retrieve device-width and density using displayMetrics.widthPixels and displayMetrics.densityDpi

Set calculated as width in img tag

the value 152 is originally was 160 but when 160 used, it looks like Image is bigger than screen.

The result is, image initially fit to screen and, zoom in works fine.

Is there a reason you are using a WebView to accomplish this? With an ImageView you can set the scaleType to fit the image to the size of the ImageView.