I have a problem with "zoom in" an image when the transform-origin: center center part of the image is cropped

I need to have the possibility to view the whole image when scrolling the container of the image

PS: transform-origin: left top fixes cropped image issue but leave empty space on the left side of the container

HTML:

<div class="btn-wrap">
  <button id="zoomIn">zoom +</button>
  <button id="zoomOut">zoom -</button>
</div>
<div class="image-container">
  <img src="https://webmeup.com/upload/blog/lead-image-105.png" />
</div>

JS:

const DEFAULT_SCALE_STATE = 1;
const MAX_SCALE_STATE = 2.25;
const SCALE_STEP = 0.25;

let imageScale = 1;

const handleZoomIn = () => {
 if (imageScale < MAX_SCALE_STATE) {
  imageScale = imageScale + SCALE_STEP;
  setImageStyles();
 }
};

const handleZoomOut = () => {
 if (imageScale > DEFAULT_SCALE_STATE) {
   imageScale = imageScale - SCALE_STEP;
   setImageStyles();
 }
};

const img = document.querySelector('img');

const setImageStyles = () => {
 img.style.transform = `scale(${imageScale})`;
 img.style.transformOrigin = `center center`;
};

document.getElementById('zoomIn').addEventListener('click', handleZoomIn);
document.getElementById('zoomOut').addEventListener('click', handleZoomOut);

code: stackblitz

example stackblitz