Tengo un problema con "acercar" una imagen cuando se recorta el transform-origin: center center de la imagen

Necesito tener la posibilidad de ver la imagen completa al desplazarme por el contenedor de la imagen.

PD: transform-origin: left top corrige el problema de la imagen recortada pero deja un espacio vacío en el lado izquierdo del contenedor

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);

código: stackblitz

ejemplo stackblitz