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

При использовании относительного позиционирования, когда окно на моем ноутбуке полноэкранное, оно работает отлично, однако, как только я сделаю его немного меньше, примерно на 20 пикселей, маркеры станут невыровненными. Есть ли способ заставить эти пули оставаться на одной линии?

HTML.

<div id="mapdiv">
    <img id="map" src="images/map117.jpg">
    <a class="battlebullets" id="b1" href="RomanBattles117.html#battlerow1">⬤</a>
</div>

CSS.

#map { 
position: relative;
width: 100%; 
top: 0;
left: 0;

}

.battlebullets {
font-size: 7px;
color: #F0BC42;
position: absolute;

}

#b1 {
top: 80%;
right: 45%;

}

https://codepen.io/epzo/pen/aaKVGx

0
0
14
1

Ответы 1

Обертка вашей карты должна иметь относительное позиционирование на ней, а не на самом изображении. Из-за этого процентные значения для маркеров для позиционирования относятся к области просмотра, а не к оболочке карты.

Когда вы устанавливаете относительное положение на оболочке карты, а также используете относительный размер шрифта области просмотра, ваша маркер теперь останется на месте, а также станет меньше по мере необходимости при меньших размерах области просмотра.

Я обновил ваш код этими изменениями. Обратите внимание на относительное положение обертки (я удалил ее с изображения) и размер шрифта 1vmax.

https://codepen.io/brianespinosa/pen/BOVYab

Другие вопросы по теме