LEAFLET: ImageOverlay полная ширина

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>

Что вы предлагаете сделать?