2

我想将图像的初始位置设置为居中，我该怎么做？我不想做 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>

4

5 回答 5

3

发现了一个动作感谢@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>

于 2019-08-29T17:22:38.107 回答
2

您可以使用zoomAbs来设置初始位置。规模需要不同于1（不知道为什么）所以我做到了0.9

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


let panZoomController = panzoom(element, {
  bounds: true,
  boundsPadding: 0.1
}).zoomAbs(
  6*s, // initial x position
  0, // initial y position
  0.9 // initial zoom 
);
.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>

于 2019-08-29T16:13:00.487 回答
0

尝试这个

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

img {
  cursor: move;
  width: 100%;
}

#scene {
  position: absolute;
  width:400px;
  left: 50%;
  margin-left:-200px;
  display:block;
}
</style>
  <div class="image-outer-wrapper">

    <div id="scene">
      <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

    </div>

  </div>

于 2019-08-29T14:53:09.440 回答
0

这里：

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

img {
  cursor: move;
}

#scene {
  display: flex;
    justify-content: center;
}

</style>
<div class="image-outer-wrapper">

    <div id="scene">
      <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

    </div>

  </div>

于 2019-08-29T14:42:17.323 回答
-1

这将使 img 在其容器内居中：

#scene {
    display: flex;
    justify-content: center;
}
于 2019-08-29T14:39:08.277 回答