css - 绝对定位的图像突破包装 div

Question

我有一组透明的 PNG 图像，它们彼此叠加，用户可以打开和关闭它们。这是工作示例。

https://www.betterinboone.org/interactive-map/

图像绝对定位在相对定位的 div 包装器的 div 中。当浏览器超过一定大小时，图像会脱离包装 div 并重叠到页脚中。

以下是适用的 CSS 和 HTML 代码片段:

.boone-edc-interactive-map {
  width: 100%;
  min-height: 500px;
}

.boone-edc-map-layers {
  position: relative;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
}

.boone-edc-map-layers img {
  width: 100%;
  height: auto;
  opacity: 1.0;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="boone-edc-interactive-map">
  <div class="boone-edc-map-layers">
    <div id="boone-map-state"><img class="boone-edc-map-states boone-edc-maps" src="https://www.betterinboone.org/wp-content/uploads/2019/08/boone-edc-states-boone-county-v3.png" alt=""></div>
    <div id="boone-map-roads"><img class="boone-edc-map-roads boone-edc-maps" src="https://www.betterinboone.org/wp-content/uploads/2019/08/boone-edc-roads.png" alt=""></div>
    <div id="boone-map-rail"><img class="boone-edc-map-railroads boone-edc-maps" src="https://www.betterinboone.org/wp-content/uploads/2019/07/boone-edc-rails-zoomed.png" alt=""></div>
    <div id="boone-map-airports"><img class="boone-edc-map-airports boone-edc-maps" src="https://www.betterinboone.org/wp-content/uploads/2019/07/boone-edc-airports-zoomed.png" alt=""></div>
    <div id="boone-map-ports"><img class="boone-edc-map-ports boone-edc-maps" src="https://www.betterinboone.org/wp-content/uploads/2019/07/boone-edc-ports-zoomed.png" alt=""></div>
  </div>
</div>

如何修复图像从包装 div 进入页脚但仍使用 CSS 响应响应。

我引用的原始解决方案似乎使用 .js 在浏览器窗口大小更改时动态调整图像大小。我希望有一个更简单的解决方案，只使用 CSS。最后，随着浏览器窗口变小，我使用了一些媒体查询来改变一些东西。我认为可能有几行 CSS 的解决方案，但我一直找不到，我需要结束这个元素

Answer 1

正如我在最初的评论中提到的，我通过使用多个媒体查询在浏览器窗口缩小时重新调整最大高度来“解决”了这个问题。因此，有问题的页面不再显示问题 - 我需要继续前进。我希望有一个更有说服力的解决方案，而不是向它扔一堆 CSS。