JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/cubiq/iscroll/master/build/iscroll-zoom.js"></script>
<div id="wrapper">
		
    <div id="content">
        
    </div>

</div>

<br><br><br>

<button id="btn">Zoom to view</button>

CSS

#wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid black; 
    overflow: hidden;
    position: relative;
}

#content {
    width: 200px;
    height: 300px;
    background-color: blue;
}

JavaScript

//get wrapper dimesions
var wrap = {
    H : $('#wrapper').height(),
    W : $('#wrapper').width()
}
//get content dimensions
var content = {
    H : $('#content').height(),
    W : $('#content').width(),
   };

var myScroll = new IScroll('#wrapper', {
		mouseWheel: true,
		keyBindings: true,
		wheelAction: 'zoom',
		scrollbars: true,
		scrollX: true,
		scrollY: true,
		zoomMin: 0.1,
		zoom: true,	
		mouseWheelSpeed: 20,
});
//compute reset zoom factor
var fitFactor = function ()
{
    //compute witch dimension is larger width vs height
    h = content.H / wrap.H;//zoom factor for height
    w = content.W/ wrap.W;//zoom factor for width
    //get max between zoom factores, remove percents
    renderedFactor = Math.max(h, w);
    //return scale factor
    return  1/renderedFactor;
};

$('#btn').on('click', function() {
    myScroll.zoom(fitFactor());
 });