图像适合屏幕在一个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 the path to my picture).

在我的应用中，我通过webView显示图片。因此，对于每个图像，我都要创建一个小的HTML代码，并在webView中加载。因此，我的html代码基本上包含在img标签中(以及我的图片路径)。

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.

我的图片有不同的大小，这就是为什么我想设置我的webView缩放，以适应图片的宽度和webView的宽度。用户不需要放大或缩小就能看到整个画面。

Is there a way to achieve it ?

有没有办法实现它?

Thanks.

谢谢。

7 个解决方案

#1

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

如果你正在创建HTML代码(你说你是)，你可以作弊:

In the html code:

在html代码:

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

#2

That did the trick for me:

这对我起了作用:

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

#3

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:

对我起作用的是:我读到，为了适应屏幕的宽度，你应该在字段中添加这个到HTML或xml中:

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:

所以我所做的,而不是扩展和缩放图像,我得到了xml,把它放到StringBuilder,发现里面的src = " https://blablabla.com/image.png ",就在“src”子串我插入“宽度= " 100% ",然后y设置我的webView StringBuilder,mi的代码是这样的:

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.

希望这对我有帮助，我花了几个小时来解决这个问题。

#4

I found a soulution.

我找到了一个soulution。

use this calculation.

使用这个计算。

device-width * (152 / density)

设备宽度*(152 /密度)

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

使用displayMetrics来检索设备的宽度和密度。widthPixels和displayMetrics.densityDpi

set calculated as width in img tag

设置为img标签的宽度

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

152的值最初是160，但是当使用160时，看起来图像比屏幕大。

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

结果是，图像最初适合于屏幕，放大效果很好。

#5

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.

为什么不使用一些javascript将图像传入android应用程序，并使用该对话框中的图像打开自定义对话框，使其根据内容进行缩放呢?

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

就我个人而言，我认为这个解决方案更适合您的方法。

#6

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

您也可以在web页面中使用一点jQuery来完成它。

Something like:

喜欢的东西:

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

#7

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.

你使用WebView来实现这个目标有什么原因吗?使用ImageView，您可以设置scaleType，使图像符合ImageView的大小。

#1