Variable div-Höhe

[Casablanca]

Hallo,

ich habe ein div-Element mit einem Hintergrundbild. Das Bild ändert seine Größe, wenn die Browser-Größe sich ändert. Das Problem ist, dass die Höhe des div sich mit verändern muss, was nicht passiert und somit der Abstand des Bildes zu den darunter stehenden Elementen immer größer wird, wenn der Browser verkleinert wird.

Nun muss das div-Element, das kein Inhalt außer einem Hintergrundbild hat, eine Anfangsgröße haben. Es muss sich aber mit dem Hintergrundbild verkleinern, wenn der Browser-Größe sich ändert.

div #logo {
    width: 100%;
    height: 200px;
    border: 1px solid lightgray;
    background-image: url('../Content/images/m3_header.jpg');
    background-repeat: no-repeat;
    background-size: contain;
}

<div id="logo"></div>
Abstand z.B. 20px
<div>Ein anderes Element</div>

Danke im Voraus. Gruß