jVectorMap 高度：% 无效

Question

我正在使用这个库：http://jvectormap.com/ 创建我的网站地图。我试图通过样式属性将地图的宽度和高度设置为100％，以使地图以全屏大小显示。

当我指定以下内容时：

<div id="map1" style="width: 100%; height: 100%"></div>

地图显示如下： 宽度属性似乎正常工作，但高度属性不起作用。当我调整窗口大小时，宽度会正确缩放，而高度似乎会不断地缩放，无论我是将图像放大还是缩小。

我如何使用百分比指定比例使地图显示？

- user3011902

Answer 1

在你的CSS中尝试这样做：

head {
    height:100%;
}
#map1 {
    position:absolute;
    height:100%;
}

将头部元素的高度设置为100％会设置地图高度的定义。

- Tai Kwangi Chicken

---

你真是太棒了！非常感谢。我已经花了好几个小时来解决这个问题。我会尽快将其设置为正确答案。 - user3011902

Answer 2

你也可以尝试使用vh代替%

<div id="map1" style="width: 100%; height: 100vh"></div>

- Ashwaq

Answer 3

为了让 jVectorMap 占据整个高度和宽度，需要在地图上添加外部 div 容器。同时设置外部容器的宽度和高度。

<div class="map-container">
     <div id="world-map" class="jvmap-smart"></div>
</div>

接下来添加 CSS 样式。

.map-container{
    height: 300px;
}

.jvmap-smart{
    width: 100%; 
    height: 100%;  
}
@media only screen and (min-width: 576px) {
    .map-container{
        height: 350px;
    }
}
@media only screen and (min-width: 768px) {
    .map-container{
        height: 400px;
    }
}
@media only screen and (min-width: 992px) {
    .map-container{
        height: 500px;
    }
}
@media only screen and (min-width: 1200px) {
    .map-container{
        height: 600px;
    }
}

想要了解更多关于jVectorMap的信息，请参考此链接https://smarttutorials.net/how-to-create-make-responsive-world-map-jvectormap-using-jquery/

- muni

Answer 4

如果您希望地图在初始加载时以任何大小正确显示，您可以使用：

<div id="map1" style="width: 100%; height: 400px;"></div>

- David Robertson