Resize ALL images in WebView with Text Autosizing

Question

I have a webview set up as:

WebView wv = (WebView) findViewById(R.id.display_post_activity_content);
        wv.getSettings().setLoadWithOverviewMode(true);
        wv.getSettings().setUseWideViewPort(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
        } else {
            wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        }
wv.loadDataWithBaseURL("", content, "text/html", "UTF-8", "");

content is static HTML, with some inline CSS. No JavaScript. This does a wonderful job of text wrapping. It also resizes larger images to fit the screen width.

However, there are some inline images that are smaller than device width. The text wraps around these.

I want it to resize all images (even small ones) to width (keeping Aspect Ratio). Is it possible to achieve that using WebView? I can do this with Html.fromHtml() and ImageGetter, but performance with WebView is way better.

xyz xyz · Accepted Answer · 2015-06-02T12:33:19

Ok, so I solved this one myself:

// Content to be rendered
content = "<p>Some Html </p> with <img></img> tags";

// Set width and height
content = content.replace("<img", "<img height=\"auto\" width=\"100%\" ");

// Render
wv.loadDataWithBaseURL("", content, "text/html", "UTF-8", "");

and Voila, full width images with preserved Aspect Ratios!

Resize ALL images in WebView with Text Autosizing

1 Answers