I want to zoom image but inside the div

Solution 1:

Instead of using the width/height, you can use the transform property to scale the image. If you place that image inside a container with overflow:hidden, you can resize the image to any size you like without it overflowing the container and the image will retain its original size for layout purposes.

With that said, you don't need a container with overflow hidden, but without one, the image will visually grow to whatever size you specify, though it will still maintain the intrinsic layout size.

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>

I want to zoom image but inside the div

Solution 1:

Related

Recent Posts