Zooming in & out an image by clicking zoom buttons (Javascript)

Question

I\'m trying to get an image zoomed in & out by two zoom buttons (+) & (-). The problem is that \"zooming in\" stops when the image is full screen size (width 100%). I ne

Answer 1

As the previous answers stated your code is absolutely fine with the exception of, you have limited the max-width of your image with max-width: 100%. If you remove that, it will give you the desired output.

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: #ffffd;
  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;
}

  

     Zoom In
     Zoom Out
  

  

    
  

Edits:

• Since you wanted the initial width to be 100% (full size), instead of max-width, just set width to 100% like done in the last edit.
• For implementing the drag feature to scroll the image, another CSS class has been added to the main container called dragscroll and it's js is imported as needed.