Центрировать изображение в мобильной версии

Question

вот так это выглядит на рабочем столе

У меня есть изображение с полной шириной экрана: 100%;

В частности, это изображениекарта, во всем центре карты есть «путь», с точками, при нажатии которых появляются некоторые манеры,

Проблема в том, что я не знаю, как сделать эту огромную чувствительную карту такчто это хорошо видно на разных устройствах, я думал о том, что такое переполнение, но я действительно не знаю, как это сделать, поэтому отображается только левая часть изображения

Это код:

.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>

Вы, кто рекомендует мне сделать эту карту адаптивной?

"- Вырезать изображение для каждого разрешения?"

Если вам нужна дополнительная информация, явнимательный

Заранее спасибо.

Answer 1

Может быть, это поможет вам

.img-map {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Answer 2

Я также попытался немного поиграться с этой проблемой. вам придется открывать в мобильном представлении, потому что я пока сосредоточился только на этом.

Here is the codepen
https://codepen.io/Spoochy/pen/LYYQzPv

Я комбинировал подгонку объекта: высоты обложки и области просмотра

Однако, подгонка объекта довольно нова(насколько я знаю) и может быть не полностью совместимым для всех браузеров. поэтому я бы предложил всегда проверять Могу ли я использовать таблицы перед использованием неизвестных свойств.

https://caniuse.com/#search=object-fit

Answer 3

Добавьте 100% ширины к контейнеру вашей карты, чтобы ширина изображения могла занимать 100% экрана, будь то на рабочем столе или на мобильном устройстве:

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