Как расположить на картинке кнопки пропорционально картинке которая имеет разный размер на разных устройствах?

Question

[DZHAMBUALT]

Здраствуйте! Возникла проблема с позиционированием кнопок на картинке. Картинка имеет некоторые точки на которых должны располагаться кнопки.

Проблема в том что картинка имеет 100vh и 100vw поэтому статическое позиционирование будет смотреться плохо на всех устройствах кроме того устройства на которое оно было сделано.

Мне нужно расположить кнопки пропорционально изменению размера картинки если картинка уменьшилась в ширине мне нужно сместить кнопки на то расстояние на которое оно уменьшилось и с высотой так же

Примеры:
Устройство 1 под которое сделано позиционирование


Устройство 2 с меньшей шириной экрана чем у Устройства 1

Comments

[ksnk]

Кнопки абсолютно позиционированы? Попробуй писать в стилях кнопки вот такое/
Считаем, что (240, 200) - координаты кнопки 1, 300 и 450 -высота и ширина картинки, для которой кнопки расположены правильно.

... {
  position: absolute;
  top:calc(100% * 200/300);
  left:calc(100% *240/450);
},

https://codepen.io/ksnk/pen/vYoWwgQ
Если подвигать размером результата - будет видно, что кнопка пытается остаться "на месте".
Правда видно также, что в калькуляции неплохо бы учитывать размер самой кнопки

[DZHAMBUALT]

ksnk, Хорошее рещение! Типа сделать чтобы половина кнопка располагалась по центру этой координаты?

[Сергей delphinpro]

ksnk, размер самой кнопки легко компенсировать трансформацией.
То есть позиционировать кнопку (точнее её левый верхний угол) в центре точки, и потом смещать translate(-50%, -50%)

[ksnk]

DZHAMBUALT,

.button1 {
  position: absolute;
  top:calc(100% * (200 + 10)/300);
  left:calc(100% * (240 + 12)/450);
  transform: translate(-50%, -50%);
}

Учитываем, что 10 и 12 - это половинные высота и ширина. Тогда кнопка останется приклеенной "по настоящему".

Answer 1

[Сергей delphinpro]

<div class="wrapper">
  <img src="">
  <button class="btn1"></button>
</div>

.wrapper { 
  position: relative;
}

.wrapper img {
  width: 100vw;
  height: 100vh;
  display: block;
}

.btn1 {
  position: absolute;
  top: подобрать значение в процентах;
  left: подобрать значение в процентах;
}