Cacher is the code snippet organizer for pro developers

/* 
Der erforderliche CSS-Code sieht wie folgt aus: 
*/

.header {
    width: 100%; /* oder eine beliebige andere Breite */
    display: inline-block;
    position: relative;
}
.header:after {
    padding-top: 66.66%; /* Als Beispiel 3:2 als Seitenverhältnis) */
    content: '';
    display: block;
}
.header-content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: green;
    color: white;
}


/* 
Der Code bedient sich dabei einem relativ unbekanntem Aspekt von CSS, nämlich dass Padding-Werte sich an der Breite eines Elements orientieren. Im obigen Beispiel wird per padding-top der Wert auf 66,66% gesetzt. Diesen erhält man, wenn man beim 3:2 Seitenverhältnis 2:3 teilt (=> 66,66%).

Auf diese Weise lassen sich mit wenig Aufwand DIVs erzeugen, die auch bei Responsive Designs ihr Seitenverhältnis beibehalten. 
*/

<!-- 
Für den Header benötigt man folgenden HTML-Code: 
-->

<div class="header">
    <div class="header-content">
        Das ist mein Header-Inhalt
    </div>
</div>