Skip to main content
se añadieron 1148 caracteres en el cuerpo
Origen Enlace

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.

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

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.

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.

Origen Enlace

Centrar imagen cuando este en version mobile

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

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.