CODEWITHSUNDEEP
htmlcss
dahas
dahas

Reputation: 127

CSS Parent element not taking child height

I need one help to get a parent element to take the height of a child element. Code below. 3 sections. Section 2 is to set a slideshow but picture is overlapping on other 2 sections. Images are 1200 * 550px

.container {
  display: flex;
  flex-direction: column;
}

.slideshow {
  position: relative;
  width: 100vw;
  height: auto;
  flex-grow: 2;
  display: block;
}

.slideshow img {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  inset: 0;
}
<body>
  <div class="container">
    <h1>The Header</h1>
    <section>
      <div class="slideshow">
        <!-- image size 1200 × 550 -->
        <img src="/images_server/image1.jpg" alt="">
        <img src="/images_server/image2.jpg" alt="">
      </div>
    </section>
    <section>
      <hr>
      <H1>New section</H1>
    </section>
  </div>
</body>

Upvotes: 0

Views: 68

Answers (1)

dahas
dahas

Reputation: 127

Found a trick to fix my issue with a working solution. I added a position: relative dummy img with the same size of the other images. Here's a working fully responsive example with only 2 images in the slideshow

<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
}

.slideshow {
position: relative;
width: 100vw;
height: auto;
display: block;
}

.images img {
display: block;
position: absolute;
width: 100%;
height: auto;
inset: 0;
opacity: 0;
transition: opacity 1200ms ease-in-out;
}

.dummy {
position: relative;
width: 100vw;
height: auto;
opacity: 0;
}

.active{
opacity: 1 !important;
}
</style>

<body>
<div class="container">
<h1>The Header</h1>
<section>
<div class="slideshow">

<img class="dummy" src="imagedummy.png" alt="">

<div class="images" id="images">
<!-- image size 1200 × 550 -->
<img class="active" src="image1.png" alt="">
<img src="image2.png" alt="">
</div>
</div>
</section>
<section>
<hr>
<H1>New section</H1>
</section>
</div>
</body>

<script>
const images = document.getElementById("images").children
function showNext(){
for (child of images ) {
if (child.classList.contains("active")) 
child.classList.remove("active")
else
child.classList.add("active")
};
}
setInterval( () => {showNext()}, 4000 )

</script>
<body>

Upvotes: 1

Related Questions