크기가 조절 된 html 이미지의 동적 위치 지정

Question

html 페이지에 배경 이미지로 배치 된지도가 있습니다. 또한지도의 특정 지점, 즉 파도의 중심에서 발생하는 음파를 나타내는 투명한 이미지가 있습니다. 웨이브 이미지가 전체 크기로 맵 상단에 놓이면 웨이브 이미지의 중심은 #waveImage {position:absolute;bottom:0;right:0} css 규칙을 사용하여 올바른 위치 (맵에서 원하는 중심점을 가리킴)에 있습니다.

문제는 임의의 알고리즘을 기반으로 원래 크기보다 크지 않은 웨이브 이미지를 동적으로 스케일해야한다는 것입니다. 분명히, 이미지가 작아지면 중심점은 초기 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%; 
}