动态定位缩放的html图像

Question

有一张地图作为背景图像放置在html页面上。还有一个透明的图像，表示从地图上的某个点发出的声波，也就是波的中心。当波浪图像以其完整大小放在贴图的顶部时，波浪图像的中心将使用#waveImage {position:absolute;bottom:0;right:0} css规则位于正确的位置(指向贴图上所需的中心点)。

问题是，我需要基于任意算法动态缩放wave图像，而不是大于其原始大小。显然，当图像较小时，由于初始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%;
}