如何将CSS像素转换为CSS3比例缩放（x，y）

Question

我有一个div，它的初始宽度和高度由用户设置。当用户在浏览器中缩放（ctrl +或ctrl-）时，该div的初始宽度和高度会改变，比如用户放大了175％，该div的纵横比保持不变，因为宽度和高度被调整。是否有一种方法可以通过动态设置transform：scale（x，y）来复制这个效果？我尝试了几种方法，但似乎找不到一个可靠的解决方案。

- elodev

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

- Pavlo

---

这个代码是有效的，但是如果用户放大浏览器，div 应该保持相同的大小。所以，如果我在你的示例中点击放大或缩小，div 的大小会改变。但我正在寻找一种方法来保持 div 的大小不变。@Pavlo - elodev

据我所知，您无法响应用户的缩放操作。将其视为无障碍功能，而不是您网站的特色功能。 - Pavlo