CSS缩放，然后调整为原始大小

CSS Scale, then resize to original

本文关键字：原始 调整 缩放 然后 CSS      更新时间：2023-09-26

我正在创建一个带有overflow:scroll的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)));

任何帮助将不胜感激!

你的数学算错了。

700 * 0.5 = 350

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

: 

700 * 2 = 1400

假设我的变量是，得到相反的保持缩放的数学将是:

(1/0.5) * 700

数学公式将是:

(1/(zoomScale/100)) * originalValue

对于原始值，您可以使用css width或height，它们仍然将像素原始值，修改的缩放值将是clientWidth, clienttheight, offsetWidth和offsetHeight元素属性。

相关文章：