Div标签响应（高度）到其中的图像

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.I'm generally new to responsive web design and