Css 绝对定位图像突破包装器div

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

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

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

.boone-edc交互式地图{
宽度：100%；
最小高度：500px；
}
.boone edc地图图层{
位置：相对位置；
背景色：#fff；
填充顶部：20px；
左侧填充：20px；
}
.boone edc地图图层img{
宽度：100%；
高度：自动；
不透明度：1.0；
位置：绝对位置；
排名：0；
左：0；
}

正如我在最初的评论中提到的，我通过使用多种媒体查询来“解决”这个问题，在浏览器窗口变小时重新调整最大高度。由于这个原因，正在讨论的页面不再显示问题-我需要继续。我希望有一个更雄辩的解决方案，而不是抛出一堆CSS。

我不确定是否100%理解您的问题，但CSS

对象匹配属性可能会帮助您如下

CSS

您可以找到有关此属性的更多信息
以下是一个我正在尝试做的工作示例：我看不出您正在谈论的问题。如果您能提供一个最小的工作示例，在联机代码编辑器（如）上显示您的问题，这将非常有帮助。CSS本身并没有多大帮助。请分享工作示例代码，因为它在我的屏幕/浏览器上的JSFIDLE或codepen（或您喜欢的任何东西）上看起来很好。为了解决这个问题/帮助您，您似乎应该将一个工作/不好的示例作为一个片段放在问题中，因为引用的站点（对我来说）没有出现为了展示这个问题，我看到你的代码不在JavaScript上，所以把它放在这里，没有这个，只有CSS
img{
    width: 100%;
    height: 100%;
    object-fit: cover /* or contain */
}