Quiero hacer zoom en la imagen dentro del div, pero cuando trato de hacer zoom en la imagen, el tamaño del div también aumenta.
<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"; }En lugar de usar el ancho/alto, puede usar la propiedad de transform para scale la imagen. Si coloca esa imagen dentro de un contenedor con overflow:hidden , puede cambiar el tamaño de la imagen a cualquier tamaño que desee sin que desborde el contenedor y la imagen conservará su tamaño original para fines de diseño.
Dicho esto, no necesita un contenedor con desbordamiento oculto, pero sin uno, la imagen crecerá visualmente hasta el tamaño que especifique, aunque seguirá manteniendo el tamaño de diseño intrínseco.
document.querySelectorAll("button").forEach(e => { e.addEventListener("click", function(){ let size = this.getAttribute("ng-click").split("=")[1]; let image = document.getElementById("zoom"); image.style.transform = `scale(${size}%)`; }); }); .image-container { width: 200px; height: 200px; overflow: hidden; } .image-container img { transition-duration: 1s; } <div class="btn-group mt-2" role="group" aria-label=""> <button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info">100%</button> <button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info">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> <div class="image-container"> <img alt="Image Preview" id="zoom" class="image-preview__image" src="https://via.placeholder.com/200x200"> </div>