html - div タグはその中の画像に (高さ) を応答します

Question

私は一般的にレスポンシブ Web デザインに不慣れで、ビデオ サイト テンプレートを作成しようとしています。div タグで Wave グラフィックをレスポンシブにすると、幅が完全に機能します。ただし、高さは画像と div タグの間にギャップを残し (高さが幅に対応していないかのように)、「wave1」div の背景色が赤で表示されます。

こちらのjsFiddleで、どの画面サイズでも表示できます。

これを修正する方法はありますか???

これが私のコードです：

<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

私はこれでしばらく遊んでいますが、文字通り、なぜこれが起こっているのか理由がわかりません.

与える

#wave1 { margin-bottom:-4px; }

機能しますが、ギャップはマージンによって引き起こされたものではなく、将来的に再び壊れる可能性があるため、確かに最善の修正ではありません。