Leicht und schnell quadratische Elemente mit CSS erstellen - Guru 2.0
Leicht und schnell quadratische Elemente mit CSS erstellen

Leicht und schnell quadratische Elemente mit CSS erstellen

In Zeiten von responsive Design ist es nicht mehr mit fixen Pixelangaben für quadratische Elemente getan. Wir wollen die dynamisch haben und sie sollen sich anpassen. Heute zeige ich dir wie du es mit reinem css hinbekommst.

Andere Lösungen für quadratische Elemente

Am einfachsten ist natürlich das img-Element. Nimm ein Bild mit einem Pixel breite (vielleicht sogar ein transparentes gif-Bild) und verwende folgenden css-Code und du hast ein quadratisches Element.

Aber wenn du das in einem div-Element machst wird es schwierig weiteren Inhalt darüber zu legen.

Natürlich kannst du auch JavaScript/jQuery anwerfen. Dazu kannst du nach dem Laden der Seite die Höhe des Elements auslesen und auf die Breite anwenden. Damit es auch bei Größenänderungen funktioniert musst du auch noch das resize-Event abfangen. Ist auch nicht so die ideale Lösung. Erstens ändert sich die Darstellung nach dem Laden und zweitens ist es nicht sehr performant.

Ein div für quadratische Elemente mit CSS erzeugen

Nehmen wir einfach an Du verwendest Bootstrap oder hast umgebende Elemente die Breiten festlegen. Dann können wir mit folgendem css einfach ein quadratisches Element erzeugen. Wenn du dein Element mit dem HTML aufgebaut hast, können wir weiter schauen.

Jetzt können wir die einfachste Lösung verwenden. Wir verwenden padding-top mit einem Prozentwert. Denn dieser bezieht sich immer auf die Breite des div-Elements. Und schwup di wup haben wir ein css für quadratische Elemente.

Quadratische Elemente mit Inhalt

Du siehst ja, dass im HTML kein Inhalt vorhanden ist. Das hat einen guten Grund, denn jetzt kannst du nur ein Hintergrundbild oder -Farbe einfügen, denn Inhalte würden die Höhe des div-Elements verändern. Wir ändern das HTML so ab, dass wir eine inneres Inhaltselement erhalten.

Jetzt musst du auch dein CSS entsprechend erweitern.

Wenn wir die innere Box mit position: absolute an die richtige Position bringen, funktioniert es auch mit dem Inhalt. Das funktioniert aber nur, da sich das absolute auf das Elternelement .box bezieht. Denn dieses verwendet position: relative. Daher wird das linke, obere Eck als Bezugspunkt für das innere Element verwendet.

 

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.