1

html ページに背景画像として配置された地図があります。マップ上の特定のポイント、つまり波の中心から発生する音波を表す透明なイメージもあります。#waveImage {position:absolute;bottom:0;right:0}波の画像がフルサイズで地図の上に置かれると、波の画像の中心はcss ルールで正しい位置 (地図上の目的の中心点を指す) になります。

問題は、任意のアルゴリズムに基づいて、元のサイズよりも大きくならないように、波の画像を動的にスケーリングする必要があることです。明らかに、画像が小さい場合、最初の css の配置により、中心点が元の中心から右と下に向かってオフセットされるため、波の中心が同じを指すように波の画像を移動する必要があります。地図上の場所。必要なのは、右と下からの正しいオフセットを計算するアルゴリズムです。

さらに役立つ情報: 波の画像は 673px x 655px で、波の中心は画像の中心にありません。

4

1 に答える 1

2

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%;
}
于 2012-07-08T07:45:28.910 に答える