Изображения с фиксированным положением на адаптивном изображении - PullRequest
Новая
       69

Изображения с фиксированным положением на адаптивном изображении

2 голосов
/ 21 июня 2020

У меня есть отзывчивое изображение карты. Сверху этой карты я хочу добавить несколько булавок. Эти контакты не могут изменить положение при изменении размера экрана. Я много чего пробовал, но контакты продолжают менять положение при изменении размера экрана. Кто-нибудь знает, как я могу решить эту проблему? Заранее спасибо!

Скриншот маленький экран

Скриншот большого экрана 

<div style="width: 100%; height: 100%; position: relative">
        <div style="width: 100%; height: auto; position: absolute">
            <img src="worldmap.png" style="max-width: 100%; width: 100%">
        </div>
        <div style="position: absolute; top: 40px; left: 100px; width: 100%; height: auto">
            <img src="pin.png" style="max-width: 5%; top: 50px; left: 100px">
        </div>
    </div>

Ответы [ 2 ]

1 голос
/ 21 июня 2020

Попробуйте использовать transform: translate(%, %) и попросите их использовать одного и того же родителя div: 

body {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
  position: relative;
  resize: both;
  overflow: auto;
}

img:nth-of-type(1) {
  max-width: 5%;
  transform: translate(400%, 100%);
  position: absolute;
}

img:nth-of-type(2) {
  width: 100%;
}
<body>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="map">
      <img src="http://www.apexdancestudio.com/wp-content/uploads/2018/01/map-pin-png-6.png" />
      <img src="https://cyberconceptslk.com/demo/wp-content/uploads/2018/04/World-Map-PNG-Photos.png" />
    </div>
  </div>
</body>

Таким образом, булавка будет перемещаться в соответствии с родительским элементом, так же, как изменяется размер карты.

0 голосов
/ 21 июня 2020

Позвольте мне объяснить проблему -

  1. Здесь у вас есть изображение, которое является адаптивным, потому что оно имеет % размеры.
  2. У вас есть булавка, которая абсолютно размещена над изображением.
  3. (основная проблема) штифт изменит свое положение по сравнению с картой, потому что он позиционируется с фиксированным значением с левым и верхним, и эти значения никогда не меняются при изменении размера или процентном изменении, которое происходит с изображением карты, когда оно меняет размер при изменении размера экрана.
  4. (Ответ) Просто определите значения left и top для этого изображения булавки в процентах %, и тогда булавка будет измените положение в соответствии с размером экрана, но останется на том же месте по сравнению с другими элементами.

Пожалуйста, дайте мне знать, где бы вы ни столкнулись с проблемой, и не стесняйтесь просить даже подробного объяснения. 

<div style="width: 100%; height: 100%; position: relative">
    <div style="width: 100%; height: auto; position: absolute">
        <img src="worldmap.png" style="max-width: 100%; width: 100%">
    </div>
    <div style="position: absolute; top: 10%; left: 25%; width: 100%; height: auto">
        <img src="pin.png" style="max-width: 5%; top: 50px; left: 100px">
    </div>
</div>
...