时间戳

首页 > 解决方案 > 在移动版本中的中心图像

html - 在移动版本中的中心图像

问题描述

这就是它在桌面上的样子

我有一个具有屏幕宽度全宽的图像：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>

你谁推荐我让这张地图响应？

“-为每个分辨率剪切图像？”

如果您需要更多详细信息，我很专心

提前致谢。

标签： htmlcsssass

解决方案

可能这会帮助你

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

推荐阅读