Question

我正在为android开发应用程序。我的应用程序有很大的尺寸（APKfile），这是因为一些高品质的图像。我决定将它移到服务器和应用程序中，只需加载网页并通过网页显示它。每个HTML页面只有一个图像（没有文本和其他项目），所有图像的宽度都是450像素，而每个图像的高度可能不同。当我加载网页时，图像不适合屏幕，并且比我的屏幕大。我需要让图像适合屏幕。

我知道我可以加载来自服务器的图像但是当我这样做时，宽高比不好并且图像被压扁了。它的宽度拉伸而高度没有生效。我使用的代码是android:scaleType="fitXY"

由于某些原因我不想完全改变代码，我更愿意找到一种方法将更改应用于html文件。我的html文件是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Team Championship</title>
    </head>


    <body>
        <img align="left" alt="Team Championship" src="../image/team_championship.png"/>

    </body>
</html>

请告诉我，如何让图像适合所有设备的屏幕？对不起，虽然我在Android编程方面不错，但我不熟悉网页编程。感谢

Answer 1

谢谢你们，

但更简单，更快捷的方法是将上面的代码更改为：

<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>

现在，在所有设备中，图像都适合屏幕。

Answer 2

我在移动网站上工作。测试设备是iPod Touch和两部Android手机。没有iPod Touch的问题，但Android手机坚持让图像成为完整尺寸。所以你只能看到大约25％的图像。我搜索了“使用图形到设备的适合网页”，它引导我到这里。

添加width =“100％”完全符合我的问题所需。简单！感谢。

Answer 3

如果您知道图片的尺寸，则可以设置网络视图的比例，例如：

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

int imgWidth = ...;
int imgHeight = ...;

if(imgWidth > displayMetrics.widthPixels) {
    int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
    m_webView.setInitialScale(scaleInPercent);
}

只需添加高度检查，你就应该好了。

Answer 4

如果您使用的是WebView，最好也是最简单的方法是在head标签内添加样式标签：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
             img{
                max-width:100%;
                height:auto;
                display:block;
                margin-left:auto;
                margin-right:auto;
             }
        </style>  
        <title>Team Championship</title>
    </head>


    <body>
        <img align="left" alt="Team Championship" src="../image/team_championship.png"/>

    </body>
</html>

像这样，所有的图像都适合并居中。

HTML，我如何将网页放入屏幕？

4 个答案: