如何在 android WebView 上显示全屏（centerCrop）图像？答案

【问题标题】：How to display fullscreen(centerCrop) image on android WebView?如何在 android WebView 上显示全屏（centerCrop）图像？
【发布时间】：2014-08-18 05:29:49
【问题描述】：

我想将图像加载到 android WebView 并使其像 ImageView 的 android:scaleType="centerCrop"。

我试过http://css-tricks.com/perfect-full-page-background-image/。所有在 PC 的 firefox 上都可以正常工作，但在 Android WebView 上却不行。它总是拉伸图像！即使我考虑到这个websetting.setLoadWithOverviewMode(false);，但没有任何改变。

只有 CSS3 方法几乎完成了。因为图像是背景而不是元素。但是，我遇到了 Using html/css3 and WebView to scale an image to the screen... get a white screen before the image loads 。解决方法也适用于 Firefox，但不适用于 android。

我别无选择，只能使用ImageView 吗？

【问题讨论】：

请张贴您要显示的一张图片的网址。
@valberos，真的，我不在乎图像是什么。我想知道如何调整 WebView 的 html/设置以使图像全屏显示并表现得像 centerCrop。
Android WebView 自 KitKat 以来基于 Chromium，或以下版本的 WebKit。请尝试通过 Chrome 或 Safari 使用 webkit。

标签： android css image webview

【解决方案1】：

请试试这个：

对于纵向模式，当图像高度小于图像宽度时；

  _webview.setPadding(0, 0, 0, 0);
 _webview.setInitialScale((int) (((imageHeight-webViewHeight)/imageHeight)*100));

    String html1=   new String ("</head> <body style=\"background:url(file:///android_res/drawable/diego.jpg) no-repeat center center\"></body> </html>");

    _webview.loadDataWithBaseURL("", html1, "text/html", "UTF-8", "");

【讨论】：

试过了。不行。它仅显示原始大小为水平中心的图像。它不能缩放到 centerCrop 也不是真正的中心。
编辑了我的答案，请尝试。
只考虑图片高度。 css3 method mentioned 要好得多，因为它不像 centerCrop 那样依赖图像大小和比例来适应屏幕。

【解决方案2】：

html {
  background-size: cover;
}

【讨论】：