Маркеры на отзывчивой карте

Question

У меня есть div, который содержит карту для жизнеспособного города. Мне нужно поместить в него несколько булавок или маркеров, но моя проблема в том, что контакты меняют местоположение на основе ширины окна.

Как это исправить, независимо от размера используемого браузера, контакты расположены там же на карте?

<div class="MapContainer"> 
    <a href="http://www.google.dk" style="position: absolute; top: 240px; left: 650px;"> 
     <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Bageri" /> 
    </a> 
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> 
     <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Rådhus" /> 
    </a> 
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> 
     <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Nærbrugs" /> 
    </a> 
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> 
     <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Ejendomshandel" /> 
    </a> 
    <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> 
     <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Avis" /> 
    </a> 
</div> 

.MapContainer { 
    background-image: url('../Content/bastumhuhej2.png'); 
    position: relative; 
    background-size: contain; 
    height: 100vh; 
    background-repeat: no-repeat; 
} 

Answer 1

Я предложил бы использовать тег изображения, а не фоновое изображение для карты. Таким образом, контейнер может адаптировать свой размер в соответствии с картой.

Затем вы можете позиционировать маркеры абсолютно с верхним и левым процентами. Это позволит маркеры для перемещения с картой и остаются в том же положении, как в следующем примере:

div{ 
 
    position:relative; 
 
} 
 
img{ 
 
    display:block; 
 
    width:100%; 
 
} 
 
.marker{ 
 
    position:absolute; 
 
    width:10px;height:10px; 
 
    border-radius:50%; 
 
    background:red; 
 
} 
 
.marker:nth-child(2){ 
 
    left:21%; 
 
    top:30%; 
 
} 
 
.marker:nth-child(3){ 
 
    left:58%; 
 
    top:60%; 
 
}

<div> 
 
    <img src="http://i.imgur.com/xUBZg0y.png" /> 
 
    <span class="marker"></span> 
 
    <span class="marker"></span>  
 
</div>