Fixed position images on responsive image

user_13786892 0
Viewed 506

I have a responsive image of a map. On top of that map I want to add some pins. These pins cannot change position when the screen size is changed. I've tried many things but the pins keep changing position when the screen size is changed. Does somebody know how I can fix this problem? Thanks in advance!

Screenshot small screen

Screenshot large screen

<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>
responsive css image html
2 Answers

Try using transform: translate(%, %) and have them share the same parent 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>

This way the pin will reposition according to the parent, the same as the map is resized.

user_127019490

Allow me to explain the problem-

  1. Here you have a image which is responsive because it is in % dimesions.
  2. You have a pin which is absolutely placed over the image.
  3. (main problem) the pin will change its place when compared to the map because it is positioned with a fixed value with left and top and these values never changes on size change or percentage change which happens with the map image as it changes size on screen size's change.
  4. (The answer) Just define the left and top values for that pin image in terms of percentage % and then the pin will change position according to screen size but will remain to be at a same place as compared to other elements.

Kindly let me know wheresoever you face a problem and feel free to ask for an even deep explanation.

<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>
user_136990270
Related