У меня есть изображение, которое имеет полную ширину экрана шириной: 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>

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

«-Отрезать изображение для каждого разрешения?»

Если вам нужно больше деталей, я внимателен

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

0
Moises Pachon

2 ответа

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

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

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

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