Question

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 #waveImage {position:absolute;bottom:0;right:0} css rule.

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.

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.

Answer 1

http://jsfiddle.net/k7uGu/6/

HTML:

<div class="map">
    <div class="signal-wrap">
        <img class="signal" src="signal.png">
    </div>
</div>​

CSS

.map {
    background: url(map.png) no-repeat;
    position: relative;
    width:  770px;
    height: 688px;
}

.signal-wrap {
    position: absolute;

    /* find/set the center position on the map,
       using the right bottom corner for positioning
       to avoid "surprise" scrollbars appearing
    */
    right:  28%;
    bottom: 33%;

    /* change these to resize signal.
       you can always use a square shape (width=height),
       even if the image inside is not square
    */
    width:  10%;
    height: 10%;
}

.signal {
    display: block;
    position: absolute;

    /* image width will be equal to parent square's size
       height must not be set to keep original image shape
    */
    width: 100%;

    /* position of the center of the signal
       relative to the parent square
    */
    right:  -23%;
    bottom: -20%;
}