CSS Scale，然后调整为原始大小

Question

我正在使用带有溢出：滚动的 div 创建“缩放”效果。这是我的困境：

我使用以下内容：

$('#object').css({ 'transform':'scale(50)' });

效果很好，但现在我想用数学方法将元素的大小调整为原始宽度/高度（将比例保持在 50%，或者任何可能的值......）

$('#object').css({ 'width': ?+'px', 'height': ?+'px' });

很确定这是一个数学问题，我可以用以下方法接近：

new_width = parseInt(origWidth) + parseInt(Math.round(origWidth*((100-zoomScale)/100)));
new_height = parseInt(origHeight) + parseInt(Math.round(origHeight*((100-zoomScale)/100)));

任何帮助将不胜感激！

Answer 1

你的数学错了。

700 * 0.5 = 350

但是...如果700 代表50%，那么100% 将是1400 而不是700 + 350...

所以：

700 * 2 = 1400

假设我的变量是获得相反保持缩放的数学将是：

(1/0.5) * 700

数学公式为：

(1/(zoomScale/100)) * originalValue

对于原始值，您可以使用csswidth或height它们仍然是像素原始值，通过缩放值修改的将是clientWidth、clientHeight、offsetWidth和offsetHeight元素属性。