0

Mi pregunta es: tengo una imagen principal que la uso como fondo, bueno a la vez quiero poner varias imágenes sobre esta en diferentes posiciones con left y top, pero al hacerla responsiva estas imágenes que están dentro se pierden y se mueven mientras se achica la pantalla , lo que quiero hacer es que queden fijas, aquí les dejo mi código:

HTML

 <div class="contenedor-map">
        <img class="map" src="images/map.png">
        <div class="location1">
            <img class="img-fluid"  src="/images/locate1.png" >  
        </div> 
  </div>

CSS

.contenedor-map{
         .map{
              position: relative;
              width: 100%;  
         }
         .location1{
            position: absolute;  
                img{ 
                    width: 5%;
                    top: 20%;
                    left: 16.5%;  
                }
         }
     }

Como se darán cuenta es un mapa donde irían localidades

2 respuestas 2

1

Creo que la solución no es utilizar css y html, pero en base a la pregunta aquí está la respuesta

[![

<style>
        .contenedor-map{
            position: relative;
        }
        .img-fluid{
            position: absolute;
            z-index: 1;
            width: 30px;            
        } 

    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa</title>
    
</head>
<body>
    
    <div class="contenedor-map">
        <img class="map" id="mapa" src="https://m.media-amazon.com/images/I/61zSkwAvlXL._AC_SX679_.jpg">
        <div class="location1">
            <img class="img-fluid" style="top: 100px; left: 150px;"  src="https://svgsilh.com/svg/1093169.svg" >  
        </div> 
        <div class="location2">
            <img class="img-fluid" style="top: 300px; left: 450px;"  src="https://svgsilh.com/svg/1093169.svg" >  
        </div> 
  </div>
</body>
</html>

<style>
        .contenedor-map{
            position: relative;
        }
        .map{
            position: absolute;
            width: 100%;
            height: auto;
        }
        .img-fluid{
            position: absolute;
            z-index: 1;
            width: 30px;            
        }

    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa</title>
    
</head>
<body>
    
    <div class="contenedor-map">
        <img class="map" src="https://m.media-amazon.com/images/I/61zSkwAvlXL._AC_SX679_.jpg">
        <div class="location1">
            <img class="img-fluid" style="top: 100px; left: 150px;"  src="https://svgsilh.com/svg/1093169.svg" >  
        </div> 
        <div class="location2">
            <img class="img-fluid" style="top: 300px; left: 450px;"  src="https://svgsilh.com/svg/1093169.svg" >  
        </div> 
  </div>

</body>
</html>

]1]1

La mejor solución es trabajar con vectores, porque si es responsivo entonces la ubicación no será correcta

10
  • 1
    Fue lo que te comente Creo que la solución no es utilizar css y html, pero en base a la pregunta aquí está la respuesta
    – roldos
    el 10 sep. 2021 a las 3:20
  • 1
    Los vectores tienen coordenadas por lo que siempre mantienen relación de aspecto, y puedes trabajar los puntos sobre la matriz de vectores, es la base de trabajar con mapas cada x,y es un localización, pero deberás formular la pregunta, ya que no es la solución a tu problema
    – roldos
    el 10 sep. 2021 a las 3:26
  • 1
    aquí podras leer
    – roldos
    el 10 sep. 2021 a las 3:33
  • 1
    otra solución
    – roldos
    el 10 sep. 2021 a las 3:33
  • 1
    te actualice la solución con css, pero te será complejo
    – roldos
    el 10 sep. 2021 a las 4:09
-1

Trata de colocar la imagen principal como background del div, y las otras imagenes si como un elemento img. Asegurate de colocar el div de la imagen principal con un tamaño específico y la imagen de fonto responsiva

1
  • Si, ya probe haciendo asi pero es lo mismo
    – novatox
    el 10 sep. 2021 a las 2:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.