Find the background position by mouse pos and its hit area

Question

I'm trying to creating a jQuery plugin where the user can interact with a div element background image. Basically, the background-image is larger than div element container, so if the user move the mouse over the div element, the image is automatically scrolled to be seen completely.

I thought to do that by working with this relation, but it is imprecise.

mX : aW = bX(?) : bW

so

-((mX * bW) / aW) / 2 = bX

this does something near but it isn't precise, how can I find the right way to do the proportion?

Answer 1

I'm going to give your "?" the name X. When mX = 0, you want X = 0. When mX = aW, you want X = bW - aW. So mX : aW :: X : bW - aW. Solving, we get X = (bW - aW)*mX/aW.