Question

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

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

某些信息可能会有所帮助：波形图像为673像素x 655像素大，波形中心不在图像的中心。

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

动态定位缩放的html图像

1 个答案: