Als Webentwickler kommt man häufig in die Verlegenheit, mit HTML-Elementen zu arbeiten, die von sich aus –beispielsweise im Gegensatz zum img-Element– weder eine feste Größe noch ein festes Seitenverhältnis mitbringen. Oftmals will man erreichen, dass sich diese Objekte zwar responsiv verhalten, aber die Proportion zwischen Breite und Höhe erhalten bleibt. CSS bietet hier standardmäßig keine intuitive Lösung an. Doch mit Hilfe von der vertikalen Padding-Eigenschaft kommt man ans Ziel.
Nehmen wir das alltagstaugliche Beispiel quadratischer Artikelbilder, deren Grafiken jedoch nicht zwingend quadratisch vorliegen, wir sie jedoch gerne ohne zusätzlichen Aufwand und vor allem ohne Verzerrung mit dem Seitenverhältnis 1:1 darstellen wollen, wobei sich ihre Breite (und damit auch Höhe) jeweils responsiv verändern soll. Mit folgendem Code ist es ganz leicht möglich, ohne zusätzliches Markup mit Hilfe von CSS dies zu realisieren:
1bc3a80de3db90cdf0535541236d95f2
mit dem Ergebnis
Doch wieso funktioniert das und wie können andere Seitenverhältnisse erzeugt werden? Der Schlüssel dazu liegt in der Padding-Eigenschaft, die sich –angegeben in prozentualen Werten– stets an demselben Grundwert wie die Width-Eigenschaft (nämlich an der Breite des Elternelements) orientiert. Bei padding-left und padding-right ist dies einleuchtend, bei padding-top und padding-bottom verwunderlich, aber in diesem Fall sehr hilfreich.
Wünscht man sich etwa ein Seitenverhältnis von 16:9, so wählt man beispielsweise die Werte width:100%;padding-bottom:56.25%;. Ein Seitenverhältnis, das dem goldenen Schnitt Rechnung trägt, ist mit den Werten width:100%;padding-bottom:61.81%; realisierbar.
Mit Hilfe von calc kann man direkt das Seitenverhältnis angeben, so zum Beispiel für 16:9 mit padding-bottom:calc(1 / (16 / 9) * 100%). Besteht das Element aus weiteren, verschachtelten Elementen, positioniert man das Child-Element absolut, um das Padding des Elternelements auszugleichen:
1bc3a80de3db90cdf0535541236d95f2
Das führt zu folgendem Ergebnis: