Question

我有一个div，其初始宽度和高度由用户设置。当用户放大浏览器（ctrl +或ctrl-）时，该div的初始宽度和高度会发生变化，例如用户放大175％，该div的宽高比保持不变，因为宽度和高度已调整。有没有办法通过动态设置transform：scale（x，y）来复制它。我尝试过几件事，但似乎无法找到可靠的解决方案。

Answer 1

解决方案似乎非常紧张。在某处存储比例，然后在按钮的单击上增加/减少它：

(function () {
  function zoom(element, scale) {
    element.style.webkitTransform =
      element.style.transform = 'scale(' + scale + ')';
    return scale;
  }

  var zoomable = document.querySelector('.zoomable');
  var scale = 1;

  document.querySelector('#zoomin')
    .addEventListener('click', function () {
      scale = zoom(zoomable, scale * 2);
    });

  document.querySelector('#zoomout')
    .addEventListener('click', function () {
      scale = zoom(zoomable, scale * 0.5);
    });
})();

演示：http://jsbin.com/aJagofU/1/edit?js,output

如何将css像素转换为css3 scale（x，y）

1 个答案: