I want to zoom image but inside the div

I want to zoom the image inside the div but when I am trying to zoom the image the size of the div is also increasing.

<img src="" alt="Image Preview" id="zoom" class="image-preview__image">

   <div class="btn-group mt-2" role="group" aria-label="">
            <button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info" onclick="zoomout()" >100%</button>
            <button ng-click="Size=200"  class="btn btn-sm btn-group btn-outline-info"  onclick="zoomin()" >200%</button>
            <button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
            <button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
            </div>

    <script type="text/javascript">

   function zoomin() {
        var GFG = document.getElementById("zoom");
        var currHeight = GFG.clientHeight;
            GFG.style.height = (currHeight + 40) + "px";
    }
    function zoomout() {
        var GFG = document.getElementById("zoom");
        var currHeight = GFG.clientHeight;
            GFG.style.height = (currHeight - 40) + "px";
    }