动态定位缩放的html图像

Question

有一张地图放置在html页面上作为背景图像。还有一个透明图像，表示来自地图上某个点的声波，即波浪的中心。当波形图像以全尺寸放置在地图顶部时，波形图像的中心位于正确位置（指向地图上所需的中心点），并使用#waveImage {position:absolute;bottom:0;right:0} css规则。

问题是我需要基于任意算法动态缩放波形图像，从不大于其原始大小。显然，当图像较小时，由于初始css定位，中心点从原始中心偏移到右侧和底部，所以我必须移动波形图像，以便波形的中心仍然指向相同在地图上的位置。我需要的是从右边和底部计算正确偏移量的算法。

一些信息可能会有帮助：波形图像是673px x 655px大，波浪的中心不在图像的中心。

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%; 
}