css Question posted in
Some basic documentation can be found here.

Css – Marker image over relative image

Is it possible to place a marker image over a relative image,
without changing the position of the marker image?

If the size of the relative image changes, the position of the marker
image on the underlying image should remain the same.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">


  <style>
    .img {
      position: relative;
      width: 50%;
      height: auto;
    }
    
    .marker {
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>

<body>

  <img class="img" src="https://picsum.photos/800/500" />
  <img class="marker" src="https://i.sstatic.net/JpinP4M2.png" style="width:50px" />

</body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It's not for a map application, but something similar. I want to mark several positions over a photo, very precisely. The displacement in the code example is too large for my use case. Is there a more precise way, or do I get around creating the photo and the markers absolute positions? Best regards Jens


  2. 0

    Not quite sure what the end goal is, if it’s needed for the map, it doesn’t do it that way at all, it does it through the API of the map service you’re using.
    And if you just need it on a picture, the simplest way is to first make a common container for pictures, and then resize the picture according to it and calculate marker coordinates in percent. In percent it will remain always in the necessary ratio, but whether this accuracy is enough for you I do not know. For the map picture it probably will not be very suitable, but for other purposes quite well

    .img {
  position: relative;
  width: 100%;
  height: auto;
}

.marker {
  position: absolute;
  bottom: 60%;
  left: 10%;
}

.container{
  position: relative;
  width:50%;
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    

</head>

<body>
  <div class="container">
     <img class="img" src="https://imgsrv2.voi.id/HpO09gZIQxpPSpVKdPkkZwaQELHpXUDAgoUw26q-tiA/auto/1200/675/sm/1/bG9jYWw6Ly8vcHVibGlzaGVycy8xNTE4MjMvMjAyMjAzMzEwODA3LW1haW4uSlBH.jpg"/>
      <img class="marker" src="https://www.svgrepo.com/show/302636/map-marker.svg" style="width:50px"/> 
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search