이미지 맵에 상대적인 위치 지정 핀

Question

Google에서와 비슷한 몇 가지 맵 핀을 배치하고 싶은 이미지가 있습니다. 그러나 이미지 크기가 변경되면 핀 위치를 조정하고 싶습니다.

가능한 해결책은 무엇입니까? 지도 크기를 조정하지만, 같은 비율을 유지하는 것입니다 경우

Answer 1

, 그것은 백분율 값과 상대 및 절대 위치와 함께 할 쉽습니다 :

<div class="map"> 
    <div class="pin michigan"></div> 
    <div class="pin california"></div> 
    <div class="pin florida"></div> 
    <div class="pin kansas"></div> 
</div>​ 

.map { 
    width: 500px; /* 250px */ 
    height: 300px; /* 150px */ 
    background: lightblue; 
    position: relative; 
} 
.pin { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background: salmon; 
} 
.michigan { 
    top: 10%; 
    right: 30%; 
} 
.california { 
    top: 30%; 
    left: 20%; 
} 
.florida { 
    bottom: 20%; 
    right: 10%; 
} 
.kansas { 
    right: 50%; 
    top: 50%; 
} 

Demo