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

Question

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

Answer 1

transform属性在不重绘页面的情况下更改 object，这极大地提高了性能，因为它减少了所有布局计算。 如果你不想使用它，你可以试试 '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>

Answer 2

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

工作小提琴