Nanogallery2 : Images are not re centered when zooming out

I use “nanogalery2” on my website. After zooming in (and eventually paning the image or not), the image is not re centered when zooming out. So, when zooming out, image may disappear.

I would like the image would be re centered when zooming out. Can anyone help me find a solution to solve that ?

You can see the issue with any demo on the owner website: =>

I have created a codepen that reproduce the problem with the original code in order to test solutions: https://codepen.io/negtrick/pen/RwMJJMQ

    <h3>
  nanogallery2 - configure the lightbox toolbars (HTML markup method)
  <a href="https://nanogallery2.nanostudio.org/" target="_blank">[more...]</a>
</h3>
<div id="nanogallery2"
    // gallery configuration
    data-nanogallery2 = '{ 
      "itemsBaseURL":     "https://nanogallery2.nanostudio.org/samples/", 
      "viewerToolbar":    {
             "standard":  "minimizeButton, label, shareButton, fullscreenButton",
             "minimized": "minimizeButton, label, fullscreenButton, downloadButton, infoButton" },
       "viewerTools":      {
             "topLeft":   "label",
             "topRight":  "playPauseButton, zoomButton, fullscreenButton, closeButton" }   
    }'
  >
  <!-- content of the gallery -->
  <a href="berlin1.jpg" data-ngthumb="berlin1t.jpg">Berlin 1</a>
  <a href="berlin2.jpg" data-ngthumb="berlin2t.jpg">Berlin 2</a>
  <a href="berlin3.jpg" data-ngthumb="berlin3t.jpg">Berlin 3</a>
</div>

You can see the behavior I need here ( image centered when zooming out) here (click on “Active the fullscreen Slideshow”