绝对定位的图像突破包装 div答案

【问题标题】：Absolutely positioned images breaking out of wrapper div绝对定位的图像突破包装 div
【发布时间】：2019-09-04 21:34:57
【问题描述】：

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

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

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

这里是适用的CSS和HTML代码sn-ps：

.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 的解决方案，但我一直找不到，我需要结束这个项目

【问题讨论】：

这是我正在尝试做的一个工作示例：whywaynecounty.com/transportation/location-transportation
我看不到你说的问题。
如果您能提供一个最小的工作示例，在codesandbox.io 等在线代码编辑器上展示您的问题，那将是最有帮助的。单独的 CSS 没有多大帮助。
请分享工作示例代码，因为它在我的屏幕/浏览器上的 jsfiddle 或 codepen（或您喜欢的任何东西）上看起来不错
为了解决这个问题/帮助你，看起来你应该在问题中将一个工作/坏的例子作为一个 sn-p，因为引用的站点没有出现（对我来说）展示问题 - 我看到你不在 JavaScript 上所以把它放在这里没有那个，只是 CSS

标签： css position css-position

【解决方案1】：

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

【讨论】：

【解决方案2】：

我不确定是否 100% 理解您的问题，但也许 css object-fit 属性可以帮助您如下

CSS

img{
    width: 100%;
    height: 100%;
    object-fit: cover /* or contain */
}

你可以找到更多关于这个属性的信息here

【讨论】：