How to initially center an image inside inline-block container when using panzoom? - panzoom

Question

I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.
I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.
How can I center this image at load initially
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

Found out a move to function Thanks to #Temani Afif for help
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>

Answer 2

You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 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>

Answer 3

Here:
<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>

Answer 4

Try this
<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>

Answer 5

This will center the img inside its container :
#scene {
display: flex;
justify-content: center;
}