Image Zoom

LOSING LEFT SIDE when scrolling while zoomed

by trentHarlem

HTML

<div id='image-container'>
  <!--   <img width='100%' height='auto' src='https://picsum.photos/id/1023/3955/2094' /> -->
     <img width='100%' height='auto' src='https://www.hauteresidence.com/wp-content/uploads/2013/04/1049-Fifth-Avenue-PH3-floor-plan-high-res-e1366734485238-1024x792.jpg' />
  </div>

  <div class='edit'>
    <button id='zoom'>
      zoom +
    </button>
    <button id='zoomOut'>
      zoom -
    </button>
    <span id='level'></span>
  </div>

CSS

#image-container {
  display: block;
  resize: both;
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow: auto;
}

#image-container img {
  display: block;
  height: auto;
  width: 100%;
  transition: all ease-in-out 0.5s;
  
  /* transform-origin: 0% 0% 0px; */
  
  transform-origin: top left 0px;
}

.edit {
  position: fixed;
  bottom: 0px;
}

::-webkit-resizer {
  height: 40px;
  width: 40px;
  background-color: #ff0a;
  border-top-left-radius: 100%;
}

JavaScript

let zoom = document.getElementById('zoom');
let zoomOut = document.getElementById('zoomOut');
let level = document.getElementById('level');
let s = 1;

zoom.addEventListener('click', function zoom() {
  if (s < 6) {
    s += 1;
    /*     let img = document.getElementById('image-container') */
    let img = document.querySelector('img')
    img.style.transform = `scale(${s})`;
  }
  //console.log('ZOOM IN');
  level.innerHTML = `zoom level:${s} `;
});

zoomOut.addEventListener('click', function zoomOut() {
  if (s > 1) {
    s -= 1;
    /*     let img = document.getElementById('image-container') */
    let img = document.querySelector('img')
    img.style.transform = `scale(${s})`;
  }
  //console.log('ZOOM OUT');
  level.innerHTML = `zoom level:${s} `;
});