How to initially center an image inside inline-block container when using 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>

@TemaniAfif I cant properly explain it but it seems to then always center the image and what happens is you can pan the image out of the view on the right side see https://jsfiddle.net/dota2pro/064ke9xy/13/ I will edit my question a little bit more — dota2pro, Aug 29 '19 at 15:20

dota2pro · Answer 1 · 2019-08-29T18:30:01.530

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>

score 2 · Accepted Answer · answered Aug 29 '19 at 16:13

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>

I actually don't know exactly how it works, I will dig more into it to understand the logic and give accurate values — Temani Afif, Aug 29 '19 at 16:18
I found the method after going thru the library there is a `moveTo ` function added answer — dota2pro, Aug 29 '19 at 17:23

score 0 · Answer 3 · answered Aug 29 '19 at 14:42

0

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>

answered Aug 29 '19 at 14:42

Otávio Barreto

1,536
3
16
35

I want the image to be centered only the first time, this will center every time – dota2pro Aug 29 '19 at 14:43
1

what do you mean by only first time? – Otávio Barreto Aug 29 '19 at 14:43
could you explain more what do you really want? – Otávio Barreto Aug 29 '19 at 14:46
I Edited my answer hope it makes more sense – dota2pro Aug 29 '19 at 14:58

score 0 · Answer 4 · edited Aug 29 '19 at 14:57

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>

score -1 · Answer 5 · answered Aug 29 '19 at 14:39

-1

This will center the img inside its container :

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

answered Aug 29 '19 at 14:39

Fusei

72
4

Sorry I don't get what you want mate ! – Fusei Aug 29 '19 at 14:57

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

5 Answers5