iOS Question WebView Image positioning

jazzzzzzz · Jun 13, 2016

I have a webview which shows a image in fullscreen.
I used WkWebView so I can pinch zoom into the image just as the camera roll does.

I want to position the image as the camera roll does it in full screen am attaching some screenshot which shows how the camera roll does it.

here the image is in landscape so it is fitted accordingly, but in webview image will be always positioned at 0,0 .
I want to position the image as show in camera roll. how can i do it?

Erel · Jun 13, 2016

You will need to find the html / css declaration that achieves the effect you like.

I tried it with this code:

B4X:

Sub LoadImage(img As String)
   Dim html As String = $"
   <html>
<head>
<style>
div.horizontal {
  display: flex;
  justify-content: center;
}

div.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
</head>
<body>
<div class="horizontal div1">
  <div class="vertical">
  <img src="file://${File.Combine(File.DirAssets, img.ToLowerCase)}"/>
  </div>
</div>
</body>
</html>
   "$
   WKWebView1.LoadHtml(html)
End Sub

I think that it looks fine, though this is not exactly what you wanted.

jazzzzzzz · Jun 13, 2016

Thanks for the html code but this one is not working as I want.some portrait images are getting stretched and landscape images are still on the top of the screen.I think some of the css and html gurus in the forum can help...!

strat · Jun 13, 2016

B4X:

Dim sw,sh As Int
    Dim rw,rh As Int
    Dim b As Bitmap
    b=ImageView1.Bitmap
    sw=GetDeviceLayoutValues.Width
    sh=GetDeviceLayoutValues.Height
    rw=b.Width
    rh=b.Height
    If (rw/rh)>(sw/sh) Then
        ImageView1.Width=sw
        ImageView1.Height=rh*sw/rw
    Else
        ImageView1.Width=rw*sh/rh
        ImageView1.Height=sh
    End If
    ImageView1.Left=(sw-ImageView1.Width)/2
    ImageView1.Top=(sh-ImageView1.Height)/2

This code works with imageview. I suppose that your view is ImageView1. I extracted from my app so didn't tried now.

jazzzzzzz · Jun 13, 2016

for an imageview we can simply use iv.MODE_FIT for the desired effect.

But here I need the same thing in webview using css and html

jazzzzzzz · Jun 14, 2016

I have found the exact css for creating camera roll like image positioning with pinch zoom, Now I cant even recognize its webview that's doing the job.!!!!

B4X:

Dim url As String
url="https://upload.wikimedia.org/wikipedia/commons/a/ad/Angelina_Jolie_2_June_2014_(cropped).jpg"
Dim html As String = $"<html>
<head>
<style type="text/css">
div{
background:url(${url}) no-repeat center center;
background-size : contain;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
   "$

iOS Question WebView Image positioning

jazzzzzzz

Active Member

Attachments

Erel

B4X founder

jazzzzzzz

Active Member

strat

Active Member

jazzzzzzz

Active Member

jazzzzzzz

Active Member

Similar Threads