Make div height Responsive when page is resizing

Question

I have a responsive slider with full-screen images. When I resize the page images stays responsive but the problem Im running into is that the parent div stays to the original height and I get very big white space and I dont know a method to fix the issue. Sorry but i don`t know how to explain this,maybe youy can figure out from the image i added.

<!-- !Showcase -->
  <div id="showcase">
    <i id="arrow-left" class="arrow far fa-arrow-alt-circle-left "></i>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <i id="arrow-right" class="far arrow fa-arrow-alt-circle-right "></i>
  </div>


#showcase {
  height: 500px;
  width: 100%;
  position: relative;
}

#slider {
  height: inherit;
  width: 100%;
  overflow-x: hidden;
}

.slide {
  width: 100%;
  height: inherit;
  background-size: contain !important;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center 10%/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center 10%/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center 10%/cover;
}

Answer 1

Showcase has a fixed height, turn it into a min-height or remove it to allow the container to fit its content's