Quadratisches DIV mit CSS erstellen

Letztens war ich auf der suche, wie man ein quadratisches DIV erzeugen kann, was sein Höhe automatisch an der Breite angepasst hat. Mit einen kleinen Hinweis kam ich auf folgende Ideen:

  • Mit einem Bild
  • Mit Javascript
  • Mit CSS

Quadratisches Bild.

Die Bildlösung ist natürlich am einfachsten. Wenn das Bild quadratisch ist, so wird dies mit folgendes CSS Einstellungen immer quadratisch angezeigt.

img {
width: 100%;
height: auto;
}

In diesem Fall bezieht sich height: auto immer auf die Breite und proportionen des Bildes. Da das Bild schon quadratisch ist, bleibt das Bild auch nach der veränderung der Breite quadratisch. Dieses vorgehen lässt sich leider nicht auf DIV Boxen anwenden.

Quadratische DIVs per Javascript:

Diese Lösung ist ebenfalls sehr simpel. Nachdem die Seite aufgebaut ist, wird per Javascript die Breite des Elementes ausgelesen und als Höhe gesetzt.

Diese Lösung hat bis jetzt den Nachteil, dass Sie zwar beim ersten Aufruf die DIV Boxen in der Höhe anpassen, jedoch nach dem verändern der Breite leider nicht nochmals anpassen. Da die Breite häufig durch das Verändern der Breite des Browsers geändert wird, kann man mit der Funktion $(window).resize die Breite nochmals anpassen.

Quadratisches DIV nur mit CSS:

In fast allen Browser gibt es noch eine einfachere Lösung. Der entsprechende CSS Befehl ist padding-top. Gibt man padding-top einen Prozentwert mit, so bezieht sich der Prozentwert immer auf die Breite des DIVs. Somit ist das DIV schon einmal Quadratisch.

<div class=“box“></div>
.box {
position:relative;
 width: 50%;
}
.box:before {
content: "";
display:block;
padding-top: 100%;
}

Wenn das DIV nur eine farbige Fläche beinhalten soll, wäre man jetzt fertig. Jedoch gibt es auch noch den Fall, dass Text in dem DIV stehen soll. Also fügen wir noch eine weitere DIV Box ein, die den entsprechenden Inhalt beinhalten soll.

<div class=“box“>
<div class=“content“> </div>
</div>

Der Container mit der Klasse Content wird absolute positioniert.

.box {
position:relative;
width: 50%;
padding-top: 100%;
}

.box:before {
content: "";
display:block;
padding-top: 100%;
}

.box .content {
 position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Ein weiterer Tipp von meiner Seite: Ich arbeite sehr viel mit dem Foundation Framework von Zurb. Um die Abstände zwischen verschiedenen Boxen wieder hinzubekommen, müssen Sie folgendes noch ändern:

.box .content{
position:absolute;
top: 0;
left: 0.9375em;
right: 0.9375em;
bottom: 0;

Damit werden die Abstände zwischen den Boxen wiederhergestellt.

Weitere Verhältnisse per CSS erzeugen

Natürlich muss die Box nicht immer quadratisch sein. Vielleicht soll die Box auch doppelt so groß sein (Verhältnis 1:2)

.box:before {
padding-top: 200%;
}

Für eine Box, die halb so hoch wie breit ist (Verhältnis 2:1)

.box:before {
padding-top: 50%;
}

Natürlich kann man auch noch weitere Verhältnisse erzeugen. Die beiden von mir genannten Beispiele sollen nur anregungen geben.

Fertiger Code auf CodePen

See the Pen qdPXyY by Marcel Stermann (@der-internetblog) on CodePen.

Nützliche Links

Um zu überprüfen, bei welchen Browser dieser Trick funktioniert, hilft ein Blick auf die Caniuse Seite.

Caniuse css-gencontent

2 Responses to “Quadratisches DIV mit CSS erstellen”

  1. Thomas sagt:

    Hallo und danke für den nützlichen Beitrag!
    Habe mir erlaubt, das Quadrat responsive zu bauen – vielleicht kann das ja auch jemand gebrauchen: http://codepen.io/pixelready/pen/jbVyYd
    Viel Spaß damit.

  2. Kevin sagt:

    Hi, sehr guter Beitrag! Resposive ist eine tolle Sache, aber nicht immer leicht umzusetzten. Da ist man auf jeden Wissenstransfer angewissen. Vielen Dank an dieser Stelle.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Mit der Nutzung dieser Webseite stimmen Sie zu, dass die Webseite Cookies nutzt. Mehr Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen