如何在不使用 transform:scale() 的情况下创建缩放效果？

Question

我有一张背景图片，中间有一个按钮。当我按下按钮时，我想放大背景图像。当它放大时，我正在使用 chartist.js 创建多个图表。一段时间以来，我一直遇到图表没有记录我分配给它的宽度和高度的问题，我终于弄清楚是缩放效果导致了问题。我不知道为什么会这样，我想找到一种不同于使用 transform:scale() 来创建缩放效果的方法。如有任何帮助，我们将不胜感激！

Answer 1

你可以尝试增加 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

Answer 2

transform 属性无需重新绘制页面即可更改对象，这大大提高了性能，因为它减少了所有布局计算。如果不想用，可以试试'background-size' 属性.

首先，在 css 中设置背景图片以具有单独的属性：

<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>

然后使用javascript改变背景尺寸

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

如何在不使用 transform:scale() 的情况下创建缩放效果？

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

javascript

css

chartist.js