How do you create a zoom effect without using transform:scale()?

Question

I have a background-image with a button in the center. When I press the button, I want to zoom in on the background-image. When it's zoomed in I'm creating multiple charts using chartist.js. For a while now I've had the problem that the chart isn't registering the width and height I have assigned to it and I have finally figured out that it's the zoom effect causing the problem. I have no idea why this happens and I would like to find a different way than using transform:scale() to create the zoom effect. Any help would be appreciated!

Answer 1

The transform property changes the object without redrawing the page, which is a great performance boost since it reduces all the layout computations. If you don't want to use it, you can try the 'background-size' property.

First, set up your background image in css to have separate properties:

<div class='bg-img'></div>

<style>
.bg-img{
  background-image: url(www.img.com/img.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size:100%;
  width: 200px;
  height:200px;
}
</style>

Then use javascript to change the background-size

<script>
function zoomit() {
  document.querySelector('.bg-img').style.backgroundSize = "200%";
}
</script>

Answer 2

you can try it by increasing the width

let btn = document.querySelector(".btn");
let image = document.querySelector(".image");

btn.addEventListener("click", function(e){
    image.classList.add("zoom");
});

.img {
  position: relative;
  width: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  transition: width 0.1s linear;
}

.btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.zoom {
  width: 120%;
}

<div class="img">
  <img class="image" src="https://i.picsum.photos/id/222/536/354.jpg?hmac=0F40OROL8Yvsv14Vjrqvhs8J3BjAdEC8IetqdiSzdlU" alt="">
  
  <button class="btn">CLICK</button>
</div>

Working Fiddle