Can Android's WebView automatically resize huge images?

Question

In some web browsers, huge images are automatically resized to fit the screen.

Is it possible to do the same in an Android WebView?

The web page just contain

Answer 1

You could send the size you want in the request parameters and let the server set the width/height in the img element for you.

Answer 2

You can have the browser resize the image for you to fit the maximum width of the screen:

<img src="huge-image.jpg" width="100%" />

Resizing its height to WebView's viewport is possible too:

<img src="huge-image.jpg" height="100%" />

However, resizing both width and height would result in a stretched image. To either resize the width or height depending of what side fits best you may consider a bit of JavaScript, like this:

<img src="huge-image.jpg" onload="resize(this);" />


<script type="text/javascript">

    function resize(image)
    {
        var differenceHeight = document.body.clientHeight - image.clientHeight;
        var differenceWidth  = document.body.clientWidth  - image.clientWidth;
        if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
        if (differenceWidth  < 0) differenceWidth  = differenceWidth * -1;

        if (differenceHeight > differenceWidth)
        {
            image.style['height'] = document.body.clientHeight + 'px';
        }
        else
        {
            image.style['width'] = document.body.clientWidth + 'px';
        }

        // Optional: remove margins or compensate for offset.
        image.style['margin'] = 0;
        document.body.style['margin'] = 0;
    }

</script>