Блог

Главная - Вопросы по программированию - Как организовать адаптивное, но абсолютное позиционирование зависимых элементов изображения?

Как организовать адаптивное, но абсолютное позиционирование зависимых элементов изображения?

#javascript #css #css-position

#javascript #css — код #css-позиция

Вопрос:

) Кажется, я хочу изобрести колесо, извините, если это так.

У меня есть изображение устройства, и я хочу сделать его анимированным (вероятно, не совсем подходящее слово). Я имею в виду, что я хочу сделать кнопки интерактивными в качестве частей меню. Представьте себе, что это пульт от телевизора или винилового проигрывателя (если нажать кнопку воспроизведения, винил начнет вращаться), но я не могу его нарисовать — только фотография штаб-квартиры — вид сверху. Некоторые элементы будут вращаться и вращаться при mouseevents. Хорошо, извините за много дополнительной информации, но, возможно, я совершенно не прав в своих усилиях.

Я прилагаю базовую скрипку.

 <div id="wrapper" class="wrapper">
  <img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
  <div id="wrapper2" class="wrapper2">
     <img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
  </div>
  <div id="wrapper3" class="wrapper3">
     <img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
  </div>

</div>

Другими словами, я хочу вырезать элементы в Photoshop, а затем создать адаптивную «головоломку» в html. Круг и прямоугольник должны масштабироваться в соответствии с основным фоном и всегда оставаться на своих местах и должны быть функциональными элементами с событиями нажатия, поворота и т.д.

Я полагаю, что ширина и высота, позиционирование должны быть рассчитаны с помощью js? Но круги…

Еще раз извините, если это слишком просто и просто. С нетерпением жду, чтобы указать мне правильный путь)

Я попробовал холст (низкий опыт), карта / области не подходят из-за необходимости анимации и переходов

Ответ №1:

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

 


.wrapper {
  position: relative;
  width: 100%;
  max-width: max-content;
}

#img1 {
  width: 100%;
}

#img2 {
  position: absolute;
  top: 28%;
  left: 35%;
  width: 28%;
}

#img3 {
  position: absolute;
  bottom: 6%;
  left: 5%;
  width: 32%;
}
<div id="wrapper" class="wrapper">
  <img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
  <img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
  <img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
</div>
 Run code snippetHide resultsExpand snippet
Метки: