title: iScroll zoom factor calculation
body: <p>I have a problem and really hope someone could help me out.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/EstSiim/zjqptg9j/3/" rel="nofollow">https://jsfiddle.net/EstSiim/zjqptg9j/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div id="content"&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;button id="btn"&gt;Zoom to view&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      width: 500px;
      height: 500px;
      border: 1px solid black; 
      overflow: hidden;
      position: relative;
  }
  
  #content {
      width: 700px;
      height: 300px;
      background-color: blue;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var myScroll = new IScroll('#wrapper', {
          mouseWheel: true,
          keyBindings: true,
          wheelAction: 'zoom',
          scrollbars: true,
          scrollX: true,
          scrollY: true,
          zoomMin: 0.1,
          zoom: true, 
          mouseWheelSpeed: 20,
  });
  
  
  var zoomFactor = 0.4;  //need to calculate this somehow
  
  $('#btn').on('click', function() {
  
      myScroll.zoom(myScroll.scale - zoomFactor);
  
  });
  </code></pre>
  
  <p>So basically what i want is iScroll (<a href="https://github.com/cubiq/iscroll" rel="nofollow">https://github.com/cubiq/iscroll</a>) to zoom out so all of its content is showing. Problem is that its content size is not fixed (it can be 700x300, 2000x3000, 200x900 and so on).</p>
  
  <p>Thank you for your time</p>