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

Question

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

我遇到了一些有用的 css 属性，transform scale 和 transform-origin，但是我一直没能达到我的目标。比例与缩放级别不匹配。

有人可以给我一些指示。

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+'%');