html - 动态定位缩放的html图像

Question

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

问题是我需要根据任意算法动态缩放波浪图像，绝不能大于其原始大小。很明显，当图像变小的时候，由于初始的css定位，中心点偏离了原来的中心点，偏向右下方，所以我不得不移动波浪图像，让波浪的中心点仍然指向同一个在 map 上的位置。我需要的是计算从右侧和底部的正确偏移量的算法。

一些可能有帮助的信息:波浪图像是 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%;
}