缩放时保留元素大小和位置

Question

如何在放大浏览器时保留元素默认大小。我的目标 无论用户放大或缩小了多少百分比，都要保留元素的默认大小和位置。

我遇到了一些有用的css属性，转换比例和转换起源，但我无法实现我的目标。比例与缩放级别不匹配。

有人可以给我一些指示。

var defaultScale = 1.0;
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
var scale = defaultScale - (zoomLevel - defaultScale);

$('.popup-overlay').css('-webkit-transform', 'scale(' + scale + ')');

Answer 1

当弹出窗口出现时，您可以测量浏览器窗口的宽度和弹出窗口，然后进行一些数学运算以将弹出窗口的百分比宽度设置为屏幕。缩放时应保持百分比。

var popwidth = $('.popup-overlay').width();
var windowWidth = window.innerWidth;
var popercentage = (parseInt(popwidth)/parseInt(windowWidth))*100;
$('.popup-overlay').css('width',popercentage+'%');