html - Div tag respond (height) to image inside it -

i'm new responsive web design , trying make video site template. when make wave graphic responsive in div tag width works perfectly. height leaves gap between image (as if height isn't responding base don width) , div tag , showing background color red of 'wave1' div.

you can see here on jsfiddle on screen size.

any idea how fix this???

here 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%  } 

the red line seeing space between tags being rendered text, , therefore taking equivalent space of single character in document flow. set font-size on container 0, 1rem (the value of front size of root element) on children

(demo)

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