动态定位缩放的 html 图像

Question

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

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

一些可能有进一步帮助的信息：Wave 图像为 673px x 655px 大，wave 的中心不在图像的中心。

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