1

I would like to load an image into android WebView and make it like ImageView's android:scaleType="centerCrop".

I have tried http://css-tricks.com/perfect-full-page-background-image/. All work great on PC's firefox but not on Android WebView. It always stretch the image!! Even I take this websetting.setLoadWithOverviewMode(false); into account but nothing changed.

Only the CSS3 method almost done. Because the image is background but not an element. However, I encounter Using html/css3 and WebView to scale an image to the screen... get a white screen before the image loads . Also the workaround work great on firefox but not in android.

Do I have no choice but to use ImageView ?

Community
  • 1
  • 1
Yeung
  • 2,202
  • 2
  • 27
  • 50
  • Post the url of one of the image that you are trying to display, please. – Víctor Albertos Sep 06 '14 at 22:56
  • @valbertos, really, I don't care what the image is. I would like to know how to adjust html/setting of `WebView` to make an image show fullscreen and behave like `centerCrop`. – Yeung Sep 08 '14 at 03:00
  • Android WebView are based on Chromium since KitKat, or WebKit for version below. Please try with Chrome or Safari to use webkit. – Täg Sep 08 '14 at 13:08

2 Answers2

0

Please try this:

For the portrait mode, and when image height is less than image width;

  _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", "");
mesh
  • 849
  • 9
  • 16
  • Tried. Not work. It just show the image with origin size an center horizontally only. It does not scale to centerCrop and not really center. – Yeung Aug 18 '14 at 07:29
  • Edited my answer, try please. – mesh Aug 18 '14 at 09:39
  • It only consider the image height. The [css3 method mentioned](http://css-tricks.com/perfect-full-page-background-image/) is much much better because it does not depend on image size and scale to fit the screen like centerCrop. – Yeung Aug 19 '14 at 03:09
0
html {
  background-size: cover;
}
Roi
  • 503
  • 1
  • 12
  • 25