Una posible solución es utilizar % para establecer el porcentaje de la posición en función del porcentaje de altura y anchura de la pantalla.

El ejemplo puede funcionar para su código:

 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>

Puede intentar acercar y alejar, luego descubrirá que siempre permanece en la posición específica.

O podría usar use css media rule para ayudarlo.

La regla arroba @media CSS se puede usar para aplicar parte de una hoja de estilo en función del resultado de una o más consultas de medios. Con él, especifica una consulta de medios y un bloque de CSS para aplicar al documento si y solo si la consulta de medios coincide con el dispositivo en el que se está utilizando el contenido.

Consulta más aquí .

Al colocar un div con la imagen de fondo como el planeta y agregar mis enlaces, pude mantener las imágenes a escala en el lugar correcto.

Código HTML:

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

Código CSS:

 .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%; }

Así es como funciona en el navegador, cuando agrega nuevos enlaces, los otros vuelven a estar un poco fuera de lugar, pero puede jugar con los porcentajes para volver a su lugar. jsviolín