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.