Center image when in mobile version - html

Question

this is how it looks on desktop
I have an image that has the full width of the screen width: 100%;
Specifically this image is a map, in the whole center of the map there is a "path", with the points that when clicking, some manners appear,
The problem is that I don't know how to make that huge sensitive map so that it can be seen well on different devices, what I was thinking is what an overflow is but I really don't know how to do it so only the left part of the image is shown
This is the code:
.map-container {
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: $blue;
}
.img-map {
width: 100%;
}
<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>
You who recommend me to make this map responsive?
"-Cut the image for each resolution?"
If you need more details, I am attentive
Thanks in advance.

Answer 1

Add 100% width to your map container so the image width can take 100% of the screen whether on desktop or mobile:
.map-container {
width: 100%;
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: blue;
}

Answer 2

May be this would help you
.img-map {
width: 100%;
height: 100%;
object-fit: contain;
}

Answer 3

I've also tried to fiddle around a bit with this issue.
you will have to open on mobile view because I only focused on that for now.
Here is the codepen
https://codepen.io/Spoochy/pen/LYYQzPv
I combined object-fit:cover and viewport heights
However, object-fit is quite new (as far as I know) and might not be fully compatible for all browsers. so I would suggest to always check the Can I use Tables before using unknown properties.
https://caniuse.com/#search=object-fit