title: Dynamically positioning scaled html image
body: <p>There is a map placed as a background image on an html page. There is also a transparent image representing the sound waves originating from a certain point on the map, i.e the center of the waves. When the wave image is put on top of the map in its full size, the center of the wave image is on the correct position (pointing the desired center point on the map) with the <code>#waveImage {position:absolute;bottom:0;right:0}</code> css rule.</p>
  
  <p>Problem is that I need to dynamically scale the wave image, never larger than its original size, based on an arbitrary algorithm. Obviously, when the image is smaller, the center point is offset from the original center, towards the right and bottom due to the initial css positioning, so I have to move the wave image so that the center of the wave still points to the same location on the map. What I need is the algorithm to calculate the correct offsets from right and bottom. </p>
  
  <p>Some information that may be of further help: Wave image is 673px x 655px large, center of the wave is not on the center of the image.</p>