panzoom - 使用 panzoom 时如何最初将图像居中放置在行内 block 容器中？

Question

我想将图像的初始位置设置为居中，我该怎么做？我不想做 CSS 居中，因为它只会在第一次应用时始终应用，我希望将位置设置为容器居中。

我需要保持样式 #scene {display: inline-block;} 否则边界内的平移会中断。

我如何才能在加载时将此图像居中

    const element = document.querySelector('#scene');
    let panZoomController = panzoom(element, {
      bounds: true,
      boundsPadding: 0.1
    });

.image-outer-wrapper {
  border: 3px solid red;
  overflow: hidden;
  height: 500px;
}

img {
  cursor: move;
  display: flex;
  justify-content: center;
}

#scene {
  display: inline-block;
}

<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
  <div id="scene">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>
</div>

Answer 1

感谢@Temani Afif 的帮助，找到了函数的移动

let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth /2) - (element.offsetWidth / 2);


let panZoomController = panzoom(element, {
  bounds: true,
  boundsPadding: 0.1
});

panZoomController.moveTo(s, 0);

.image-outer-wrapper {
  border: 3px solid red;
  overflow: hidden;
  height: 300px;
}

img {
  cursor: move;
}

#scene {
  display: inline-block;
}

<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
  <div id="scene">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>
</div>