Home/ Questions/Q 6990037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:17:36+00:00

I am using a Webview and some css3 to load an image and have

  • 0

I am using a Webview and some css3 to load an image and have it scale to fill the screen on any size Android device.

Unfortunately, I am getting reports that on smaller screens, the image is not scaling properly and getting clipped. When the image is clipped, it is also not scrollable. I would like to get it to scale to fill the screen on any device, but if that is not possible, it should at least be scrollable.

Here is the code:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>*************</title>

    <style>
        * { margin: 0; padding: 0; }

        html { 
            background: url(images/1_1.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>

<body bgcolor="#000000">



</body>

</html>

XML

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#000000" android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView  
    android:id="@+id/mapview"
    android:background="#000000" android:scaleType="centerInside" android:layout_gravity="center_vertical|center_horizontal" android:clickable="false" android:fitsSystemWindows="true" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </LinearLayout>

Any thoughts?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can use this:

    <img src="images/1_1.jpg" width="100%" style="position:fixed" />
<div style="width:100%;overflow:scroll-y;position:fixed;height:100%"></div>

    The div will be placeholder for all other contents of the page. I mean any other tag you write goes in it as if its the body tag.

    • 0