A possible solution is to use % to set the percentage for the position based on the percentage of screen height and screen width.

Example may work for your code:

img{
width:50vw;
height:50vh
}
div{
position: absolute;
top:20%;
left:20%;
}

<img src='https://i.stack.imgur.com/zgnFR.jpg'>
<div>Hope this helps</div>

You could try zoom in and zoom out, then you will find out it always stay at the specific position.

Or you could use use css media rule to help you.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Check more here.

By placing a div with the background image being the planet, and adding my links I was able to keep the images to scale in the correct place.

HTML code:

        <div class="burning-planet">
            <a target="blank" style="text-decoration: none" href="https://twitter.com/">
              <img class="twitter" alt="" src="images/twitter-logo.png">
            </a>
            <a target="blank" style="text-decoration: none" href="https://instagram.com">
              <img class="instagram" alt="" src="images/instagram-logo.png">
            </a>
            <a target="blank" style="text-decoration: none" href="https://medium.com/">
              <img class="mediumLogo" alt="" src="images/medium-logo.png">
            </a>
        </div>

CSS Code:

.burning-planet{
width:700px;
  height:500px;
  background-image: url("https://i.stack.imgur.com/zgnFR.jpg");
  background-size: 100%;
}

.twitter {
  position:relative;
  width: 4.1rem;
  height: 4.1rem;
  top: 19.5%;
  left: -37.8%;
}

.mediumLogo {
  position:relative;
  width: 3.8rem;
  height: 3.8rem;
  top: 38.5%;
  left: -14.5%;
}

Here is how it works in the browser, when you add new links the other ones become a bit off again but you can just play with the percentages to get back into place. jsFiddle