Question

我正在尝试制作响应式地图。这是我的代码：

<div class="maincontent">
<div class="map-holder">
 <div class="map">
 <div class="row1">
   <div class="part1">
   </div>
 </div>
 ....
 </div>
 </div>
 </div>
 .maincontent{position:relative;}
 .map-holder{width:100%; height:100% position:absolute; left:0; top:0; overflow:hidden;}
 .map{width:2000px; height:2000px; position:absolute; left:0; top:0;}
 .row1{display:block;}
 .part1{background-img:"path to a part of the map";}

地图的所有部分都在＆＃34;地图＆＃34; DIV。我想通过调整＆＃34; map-holder＆＃34;的大小来显示地图的一小部分。但是当我将高度和宽度设置为200px这样的数字时，显然没有响应。当我使用百分比调整大小时，浏览器中不会显示任何内容。

请帮帮我！如何调整＆＃34;地图持有者＆＃34;的大小，以便它能够在不同的屏幕分辨率下保持响应？

Answer 1

我记得首先使用Google Maps API并且遇到CSS的任何小问题或者周围的divs会让它消失。我有这段代码：

HTML：

<div id="mapWrap">
    <div id="map-canvas">
    </div>
</div>

地图放在map-canvas内。

CSS：

html, body{
      height:100%;
      width:100%;
    }

    #mapWrap{
    position: relative;
    width: 100%;
    height:100%;
    padding-bottom: 100%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
#map-canvas{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width:100%;
    height:100vh;
    left: 0;
    margin: 0;
    padding: 0;
}

这给了我一个完全响应的网页本身。然后，我需要做的就是在它周围添加内容。

我需要更多地了解您的具体案例，以了解它的具体情况。但也许这段代码现在可以提供帮助。

制作一张反复无常的地图

1 个答案: