如何将 css 像素转换为 css3 比例 (x，y）

How to convert css pixels to css3 scale (x,y)

本文关键字：比例 css3 css 像素 转换      更新时间：2023-09-26

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

解决方案似乎非常简单。将比例存储在某个地方，然后在单击按钮时增加/减少它：

(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

相关文章：