webview html rendering issue, image is getting cropped

I am trying to render an image as html in webview of android but not able to calibrate it correctly in mobile, original image gets cropped both left and right using below code. how should I fix this and how to know if it will render fine on mobile (by running in browser only) ? below is what I am doing.

image dimensions are:(624*936)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
    />
  </head>
  <body style="margin: 0; padding: 0; width: 100%; height: 100%">
    <div
      onclick="surface.touch()"
      style="
        background: url(https://image/startBackground_1)
          center center fixed;
        background-repeat: no-repeat;
        height: 100%;
        background-size: cover;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        font-family: 'Noto Sans', sans-serif;
      "
    >
      <div
        style="margin-bottom: 100%; margin-top: 100%;"
      ></div>
    </div>
  </body>
</html>