How zoom in/out in div content?

See more:

Javascript

CSS

HTML

Hi I have this html and CSScode:

<div class="col-8 border border-1 border-dark rounded rounded-2 p-0">

<div id="toolsBox"> <button >

</button>
<button >
</button>
<button onclick="toolBoxFunction(event,'zoomInBtn')">
<img src="~/assets/sitetheme/zoom-in.png" />
</button>
<button  onclick="toolBoxFunction(event,'zoomOutBtn')">
<img src="~/assets/sitetheme/zoom-out.png" />
</button>

  <button >
  
  </button>
  <button >
    
  </button>
  <button >
    
  </button>
</div> <div class="overflow-auto p-0"> <div id="adsBody">

      <div id="dimensionsInfo"></div>
      <div id="selection"></div>

  </div>
</div> 
</div>

and CSS is:

#toolsBox {
  
    display: flex;
    justify-content: start;
    width: 100%;
    height: 42px;
    background-color: whitesmoke;
    text-align: center;
    border-bottom:2px solid black;
    border-radius: 5px 0px;
    color: black;
    overflow-x: auto;
}


    #toolsBox button {
        width: 40px;
        height: 40px;
        margin-inline: 2px;
        border: 1px solid transparent;
        border-radius: 5px;
        background-color: whitesmoke;
    }

    #toolsBox button:hover {
        transform:scale(0.95);
        background-color:lightgray;;
    }

    #toolsBox button img {
        width: 25px;
        height: 25px;
        text-align:center;
    }
#adsBody {
    position: relative;
    min-width: 1000px;
    max-width: 1000px;
    height: 3000px;
    background-color: whitesmoke;
    cursor: crosshair;
    border: 1px solid black;
    border-radius: 0px 5px;
    overflow: visible;
    transform:scale(1);
}

as you can see my adsbody div is bigger the parent so get the scroll bar.
I want add button for zoom in and out of the adsbody div. so for example when user click on zoom out can see the entire of adsbody without needs scrolling or zoom in for only see part of it.
also my user can draw shape in the adsbody div with mouseclick/touchScreen. so I do not what the Axis of width and height changed so I can get the user position of draw correctly.

I try this javascript:
<pre lang="Javascript">function toolBoxFunction(event, btnName) {
    let computedStyle = window.getComputedStyle(adsBody);
    let currentScale = computedStyle.transform.match(/-?\d+(\.\d+)?/g)[0]


    if (btnName == "zoomInBtn") {
        var newScale = currentScale + 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';

    } else if (btnName == "zoomOutBtn") {
        var newScale = currentScale - 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';
    }
}

it is worked but not correctly and the adsbody shrink in middle of the parent div or get the more scroll bar. also the Axis is get wrongly.
for example the adsbody shrink and have empty space between parent. But I want position of the is not change and still fil the parent.
how can do this?

What I have tried:

I try this javascript:

function toolBoxFunction(event, btnName) {
    let computedStyle = window.getComputedStyle(adsBody);
    let currentScale = computedStyle.transform.match(/-?\d+(\.\d+)?/g)[0]


    if (btnName == "zoomInBtn") {
        var newScale = currentScale + 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';

    } else if (btnName == "zoomOutBtn") {
        var newScale = currentScale - 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';
    }
}

it is worked but not correctly and the adsbody shrink in middle of the parent div or get the more scroll bar. also the Axis is get wrongly.
for example the adsbody shrink and have empty space between parent. But I want position of the is not change and still fil the parent.
how can do this?