jQuery Panzoom with contain: 'invert' inside a container with a fixed width

Question

I'm trying to use jQuery.panzoom.js. All I have is a container with a fixed width (which might be smaller than the svg inside it). The problem is that if the svg is bigger than than the width of the container you cannot see the whole of it (even when you try to "pan it").

The html:

<div class="container">
  <div id="parent">
    <div class="panzoom">
      <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
    </div>
  </div>
</div>

CSS:

.container {
  width: 600px;
  margin: 0 auto;
  border: 1px solid red;
}

#parent {
  border: 1px solid black;
}

.panzoom { width: 100%; height: 100%; }

And the javascript (as provided in the demos of this plugin):

 (function() {
   var $section = $('#parent');
   $section.find('.panzoom').panzoom({
     $zoomIn: $section.find(".zoom-in"),
     $zoomOut: $section.find(".zoom-out"),
     $zoomRange: $section.find(".zoom-range"),
     $reset: $section.find(".reset"),
     startTransform: 'scale(1.1)',
     increment: 0.1,
     minScale: 1,
     contain: 'invert'
   }).panzoom('zoom');
 })();

Here's a working demo, reproducing the problem: http://codepen.io/FakeHeal/pen/WreLyZ

Answer 1

You have to set the Dimension of the .panzoom class the same size as your image. So i expect your image is 600px in with and has a height of 900px use this css part

CSS-File

.panzoom { 
   width: 600px; 
   height: 900px; 
}