[Question] Why the background size property is done with percentages?

[luizamunk]

Hi there everyone! :D

I'm using the library in a project and noticed that increasing the size of the zoom box makes the zoomed-in image seem more pixelated than the image zoomed in with a smaller box, even though I didn't increase the zoomFactor prop. I initially thought that the zoomFactor was the only parameter responsible for increasing the image size, but after doing some calculations, it seems that the image size also increases with the size of the box. This is due to how the background-size is calculated.

Here's my understanding of the calculation: The background-size is calculated using: backgroundSize: ${zoomFactor * this.imgBounds.width}% ${zoomFactor *this.imgBounds.height}%, where zoomFactor = 1.5.

In this hypothetical example:

I have an image of 2000px width and 1000px height.
My zoom box is 150px by 150px.
My zoom factor is 1.5.

My background-size calculation will have the following result: (1.5 * 2000px)% (1.5 * 1000px)%, which is 3000% in width and 1500% in height.

After that, this property will be applied to a 150px by 150px box, which is the size of the magnifier glass. 3000% of 150px is 4500px in width and 1500% of 150px is 2250px in height. To calculate the actual zoom factor of the image, we can take the final size of the image divided by the initial size of the image: 4500 / 2000 = 2.25. This final value gives us the ratio of image increase, which is not 1.5 as we initially thought.

The total zoom would only be exactly 1.5 if the box were 100px by 100px. In fact, the way the calculation is done today, the size of the box directly influences the zoom factor.

I just want to make sure that my calculations make sense. If so, is there a reason why we set this to be in percentages? Shouldn't we use pixels to remove the influence of the box size?

Thanks in advance for your help!