Responsive div-Tag mit korrektem Seitenverhältnis

Viele Websites nutzen, beispielsweise im Header-Bereich, ein DIV, dem ein background-image zugewiesen wird. Das sieht schön aus, kann jedoch bei Responsive Designs zu Problemen führen.

Bei Responstive Designs passt sich das Seitenlayout dem jeweiligen Gerät an, mit dem die Website betrachtet wird. Die Breite eines DIVs passt sich dabei im Regelfall passend an. Zum Problem kann jedoch die Höhe werden. Um kein abgeschnittenes oder unglücklich platziertes Hintergrundbild zu erhalten, hilft folgender Trick.

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

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

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.

1 Gedanke zu “Responsive div-Tag mit korrektem Seitenverhältnis”

Schreibe einen Kommentar