javascript - javascript缩放与变换比例调整大小

Question

原谅我希望这将是一个非常简单的问题，但我对在 css 中使用转换并不熟悉，并且正在努力解决缩放问题。

这是一个有问题的jsfiddle：jsfiddle here

我希望能够放大和缩小这个板，将中心保持在中心。缩小效果很好，但放大有问题。

如果我将变换原点设置为 0 0，它有点“有效”，只是容器是静态的，当然原点在错误的位置。

如果我将它设置为 50% 50% 那么当我放大时，容器的高度不会改变（我知道它在 DOM 模型之外的缩放！！！）但我不知道如何修复它所以原点更改，然后我可以向上滚动以查看顶行。

这是我进行主要缩放的地方：

var slider = document.getElementById("myRange");
slider.oninput = function() {
    innerMain.style.transform = (`scale(${zoomValues[this.value]})`);
    const rect = innerMain.getBoundingClientRect()
}

我尝试使用 getBoundingRect 并尝试调整外部容器的大小，但这取决于屏幕大小。

任何正确方向的指示都将不胜感激。

标签： javascriptcsscss-gridcss-transforms