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

问题描述

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

解决方法

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>

您可以通过增加 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

javascript