Div tag respond (height) to image inside it

Question

I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.

You can see it here on jsFiddle on any screen size.

Any idea how to fix this???

Here is my code:

<div id="wave1">
    <img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->

#wave1 {
    background-color:#C31619;
    width: 100%;
    height: inherit;
    padding: 0;
    margin: 0;
}

#wave1 img {
    width: 100% 
}

Answer 1

The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children

(Demo)

#wave1 {
  background-color: #C31619;
  width: 100%;
  height: inherit;
  padding: 0;
  margin: 0;
  font-size: 0;
}
#wave1 * {
  font-size: 1rem;
}