Question

对于我的项目，我正在使用Leaflet。特别是，我使用图像作为背景。

这是我的摘录：

var src = "https://image.pbs.org/video-assets/YLnFzPz-asset-mezzanine-16x9-qHliuxi.jpg.focalcrop.1200x630.50.10.jpg";

// map.jpg size
var width = 1000,
    height = 800;

var map = L.map("map", {
  crs: L.CRS.Simple,
  zoom: 1
});

var bounds = [[0, 0], [height, width]];

L.imageOverlay(src, bounds).addTo(map);
map.setMaxBounds(bounds);
map.fitBounds(bounds);

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>

<div class="container">
  <div id="map" style="height: 300px;"></div>
</div>

我想要实现的是一个像img元素一样缩放的地图。实际上，当container的宽度大于1000px（例如map.jpg的宽度）时，此方法有效。

当container较小时，地图应缩放并保持纵横比，如下所示：

.container {
  display: inline-block;
  width: 300px;
  overflow: hidden;
}

figure {
  margin: 0;
}

.preview {
  margin-bottom: 1rem;
}

.container img {
  width: 100%;
}

.preview.resize .container {
  width: 200px;
}

.preview.resize .container img {
  width: 300px;
}

.preview.resize .container.wanted img {
  width: 100%;
}

<div class="preview">
  <div class="container">
    <figure>
      <img src="https://image.pbs.org/video-assets/YLnFzPz-asset-mezzanine-16x9-qHliuxi.jpg.focalcrop.1200x630.50.10.jpg">
      <figcaption>Actual (full width, ok)</figcaption>
     </figure>
  </div>

  <div class="container wanted">
    <figure>
      <img src="https://image.pbs.org/video-assets/YLnFzPz-asset-mezzanine-16x9-qHliuxi.jpg.focalcrop.1200x630.50.10.jpg">
      <figcaption>Wanted (full width, ok)</figcaption>
     </figure>
  </div>
</div>

<div class="preview resize">
  <div class="container">
    <figure>
      <img src="https://image.pbs.org/video-assets/YLnFzPz-asset-mezzanine-16x9-qHliuxi.jpg.focalcrop.1200x630.50.10.jpg">
      <figcaption>Actual (resized, bad)</figcaption>
     </figure>
  </div>

  <div class="container wanted">
    <figure>
      <img src="https://image.pbs.org/video-assets/YLnFzPz-asset-mezzanine-16x9-qHliuxi.jpg.focalcrop.1200x630.50.10.jpg">
      <figcaption>Wanted (resized, ok)</figcaption>
     </figure>
  </div>
</div>

您建议做什么？

传单：ImageOverlay全宽

0 个答案: