Using a-frame to display panorama image captured by Android phone

Panorama photos are an option in Android camera options. The process is simple, producing an image that is 11568 x 1696 pixels at 72 dpi.

But when that image is displayed in a-frame using the code below, I see a distorted image where the people look really tall and the tables at waist height look like they are on the floor.

Are there parameters that can be added to adjust the proportion/eyeline?

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script>
    window.addEventListener("wheel", (event) => {
      const delta = event.wheelDelta / 120 / 10;
      var mycam = document.getElementById("cam").getAttribute("camera");
      var finalZoom =
        document.getElementById("cam").getAttribute("camera").zoom + delta;
  
      // limiting the zoom
      if (finalZoom < 0.5) finalZoom = 0.5;
      if (finalZoom > 2) finalZoom = 2;
      mycam.zoom = finalZoom;
  
      document.getElementById("cam").setAttribute("camera", mycam);
    });
  </script>
  <a-scene>
    <a-entity
      id="cam"
      camera="zoom: 1"
      look-controls="reverseMouseDrag: true"
    ></a-entity>
    <a-assets>
      <img id="skyTexture" crossorigin="anonymous" src="panorama.jpg" />
      
    </a-assets>
    <a-sky src="#skyTexture"></a-sky>
  </a-scene>

Are there options (parameters) that I can add to adjust proportion to make it look better?

The original image:

There are scaling options available. In the case of the images provided as samples, you can vary the x-y-z scaling by adding code like below:

<a-entity scale="0.25 1 2">

So part of the code above should be changed to...

<a-entity 
   scale="0.25 1 2"
   id="cam"
   camera="zoom: 1"
   look-controls="reverseMouseDrag: true"
 ></a-entity>