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

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>

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

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

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

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

html css sass

0

Moises Pachon 27 Окт 2019 в 22:02

Вы пробовали использовать width: 100vw;?

–

SeReGa

27 Окт 2019 в 22:27

Можете ли вы поделиться снимком экрана, показывающим, как он в настоящее время отображается на вашем экране?

–

Moïze

27 Окт 2019 в 22:34

Answer 1

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

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

0

Moïze 27 Окт 2019 в 22:38

На карте он есть с таким классом ".img-map"

–

Moises Pachon

27 Окт 2019 в 23:58

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

–

Moïze

28 Окт 2019 в 00:26

Answer 2

Может быть это поможет тебе

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

0

Awais 28 Окт 2019 в 11:44

Answer 3

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

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

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

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

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

0

Spoochy 4 Ноя 2019 в 18:43

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

3 ответа

Похожие вопросы

Новые вопросы

html