1

Tengo una imagen que tiene todo el ancho de la pantalla width:100%;

Especificamente esta imagen es un mapa, en todo el centro del mapa hay un "camino", con unos puntos que al dar clic salen unas modales,

El problema es que no se cómo hacer ese enorme mapa responsive para que se pueda ver bien en diferentes dispositivos, lo que estaba pensando es hacerle un overflow pero realmente no se como hacerlo ya que solamente se muestra la parte izquierda de la imagen

Este es el código:

<div class="container-fluid"><div class="row">
        <div class="map-container">
            <img class="img-map" src="public/images/mapa.svg">
            <div id="step1" class="point argentina"></div>
            <div id="step2" class="point brasil"></div>
            <div id="step3" class="point venezuela"></div>
            <div id="step4" class="point colombia"></div>
            <div id="step5" class="point panama"></div>
            <div id="step6" class="point mexico"></div>
            <div class="mod-paso-1">
                <div class="mod-info">
                    <p><b>XXXXXXXXXX</b></p>
                    <p><b>XXXXXXXXX</b></p>
                    <p><b>XXXXXXXX</b></p>
                    <P>XXXXX</P>
                </div>
            </div>

        </div>
    </div></div>




.map-container {
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: $blue;}

.img-map {

width: 100%;}

Ustedes que me recomiendan para hacer esta mapa responsive?

"-Cortar la imagen por cada resolución?"

Si necesitan más detalles, estoy atento

Gracias de antemano.

2
  • 2
    ¿Puedes subir el código de lo que tienes? Commented el 27 oct. 2019 a las 17:39
  • Lo que entiendo que dices es que no se ve correctamente tu mapa? Si puedes añadir imagenes para que se entienda mejor del problema que te pasa sería mejor
    – Jose
    Commented el 30 oct. 2019 a las 0:28

1 respuesta 1

1

Puedes hacer que la imagen de fondo ocupe siempre el 100% de la pantalla redimensionándose con:

.img-map {width: 100vw; height: auto;}

pero me imagino también vas a tener que redimiensionar los botones/puntitos que abren los modals y su posición en el mapa.

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.