Как сверстать блок с изображением на фоне и пинами?

Question

[Иван Гордиенко]

Есть подобный блок. Пины на изображении должны быть зафиксированы и меняться при ховере, вопрос стоит в том, как сверстать правильно подобные вещи? В мобильный версии этого блока нет, но как это сверстать и зафиксировать до максимально уменьшаемого размера? На экране в 1920 это сделать можно и не составит проблем в "подогнать" по пикселям, но всё поползет при уменьшении. Есть идеи? Верстать буду по сетке бутстрап 4.

Comments

[AngReload]

А можно использовать такие единицы измерения как vw? Или сделать картинку SVG?

[Иван Гордиенко]

AngReload, картинка .png :(

Использовать можно всё!

[romanovilya]

Подгонять позицию пинов/тултипов не по пикселям, а в процентах от ширины/высоты картинки. Ну и естественно абсолют, топ/боттом, лефт/райт.

[Иван Гордиенко]

romanovilya, я так и предполагал, другого выхода нет? .(

Answer 1

[Владимир Проскурин]

В данном примере текст фиксируется по нижнему краю и по центру.

Comments

[Иван Гордиенко]

Спасибо тебе, сработало.