CODEWITHSUNDEEP
csspositioncss-position
Brett
Brett

Reputation: 887

Absolutely positioned images breaking out of wrapper div

I have a set of transparent PNG images that sit on top of each other and the user can toggle them on and off. Here is the working example.

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

The images are absolutely positioned within a div that is relative positioned div wrapper. When the browser is above a certain size, the images break out of the wrapper div and overlap into the footer.

Here is the applicable CSS and HTML code snippets:

.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>

How do I fix the images from breaking out of the wrapper div into the footer but yet still act responsively using CSS.

The original solution I referenced appears to use .js to dynamically resize the images on browser window size change. I was hoping for a simpler solution just using CSS. In the end, I used a handful of media queries to change things as the browser window gets smaller. I thought there may be a solution with a couple lines of CSS, I was never able to find one and I needed to wrap up this project

Upvotes: 2

Views: 222

Answers (2)

Sim1-81
Sim1-81

Reputation: 626

i'm not sure to understand your issues at 100% but maybe the css object-fit property can help you as following

CSS

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

you can find more info about this property here

Upvotes: 0

Brett
Brett

Reputation: 887

As I mentioned in my initial comment, I "solved" the problem by using multiple media queries to readjust the max height as the browser window sizes down. The page in question no longer displays the issue because of this - I needed to move on. I was hoping for a more eloquent solution rather throwing a bunch of CSS at it.

Upvotes: 1

Related Questions