如何将地图限制在内容框内？

Question

正如您在下面的自我解释示例中看到的那样，background-clip 属性不适用于 #map。

<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
#rectangle {
  display: block;
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
  background: orange;
  background-clip: content-box;
}

#map {
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
  background-clip: content-box;
}
</style>
    </head>
    <body>
        <div id="rectangle">Blablabla</div>
        <br />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
    </body>
</html>

有类似的吗？如何将地图限制在内容框内？

非常感谢！

Answer 1

您可以将您的地图 <div> 放入另一个容器 <div> 中，使其看起来与第一个盒子相似。

CSS:

#map {
  width: 100%;
  height: 100%;
}

#mapcontainer {
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
}

HTML:

<div id="mapcontainer">
  <div id="map"></div>
</div>

如何将地图限制在内容框内？

How to limit the map to the content box?

css

leaflet