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