Это ваше решение
function zoomin() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 2500) return false;
else {
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 100) return false;
else {
myImg.style.width = (currWidth - 100) + "px";
}
}
*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
width: 100%;
height: 100vh;
overflow: auto;
cursor: grab;
cursor: -o-grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.main img {
height: auto;
width: 100%;
}
.button {
width: 300px;
height: 60px;
}
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> +</button>
<button type="button" onclick="zoomout()"> - </button>
</div>
<div class="main dragscroll">
<img id="map" src="https://placeimg.com/100/100/nature" />
</div>