1

Блоки с нумерацией выступают в качестве ссылок, в качестве background выступает изображение на фоне в блочном виде.

Посоветуйте как позиционировать блоки относительно изображения, так чтобы при разных расширениях экрана блоки не поплыли? (Это не касается мобильной версии).

описание

1 ответ 1

2

Я только позиции блоков точно не задавал, на глазок.

div {
    position: relative;
    width: 0;
    height: 0;
    padding: 21% 50%;
    background-image: url(https://i.stack.imgur.com/GY6vm.png);
    background-size: 100%;
}
a {
  position: absolute;
  width: 12.1%;
  height: 28.9%;
 }
a:nth-child(1) {
    top: 44.2%;
    left: 19.7%;
}
a:nth-child(2) {
    top: 36.2%;
    left: 32.3%;
}
a:nth-child(3) {
    top: 21.2%;
    left: 44.9%;
}
a:nth-child(4) {
    top: 50.7%;
    left: 57.4%;
}
<div>
<a href='#1'></a><a href='#2'></a><a href='#3'></a><a href='#4'></a>
</div>

Использовал фиксированные пропорции блока с background (padding со всех сторон в процентах считается только от ширины, высота выставлена в ноль) и соответственно сами ссылки в процентах от ширины/высоты блока, то есть зависят только от ширины прородителя, как и блок-изображение. Значит их позиция фиксирована. ЧТД =)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.