Quadratische Bilder mit CSS erzeugen

Quadratische Bilder mit CSS erzeugen

Hast du noch nie das Problem gehabt, dass Bilder unbedingt quadratisch angezeigt werden müssen? Wenn du sie gleich im Seitenverhältnis 1:1 hochlädst ist dies ja kein Problem. Doch auf solche Ideen kommt man (oder dein Kunde) immer erst sehr spät. Und jetzt hast du lauter Bilder im Hoch- und/oder Querformat und nur die berühmte Thumbnail-Größe (150×150 Pixel) von WordPress. Und was machst du jetzt? Am besten weiterlesen und sehen wie du mit einer paar Zeilen CSS das Problem aus der Welt schaffst.

Eine kleine Erinnerung am Anfang der Änderungen an deinen Theme: Mache nie etwas am Originaltheme (außer du hast es selbst programmiert), denn dann kannst du keine Updates mehr machen. Besser ist es, wenn du dir ein Child-Theme anlegst und dort die Änderungen machst.

Rechteckige Bilder mit CSS quadratisch darstellen

Rechteckige Bilder mit CSS quadratisch darstellen

 

Die klassische Variante für quadratische Bilder mit CSS

Mit dieser Version arbeitest du mit CSS und dem Attribut background. Das funktioniert an und für sich ganz gut um quadratische Bilder zu erzeugen. Doch es gibt ein ABER. Wenn du viele verschiedene Bilder hast (und das ist in WordPress meistens der Fall), dann bist du nur am Anpassen deiner CSS-Datei.
Außerdem ist das eher sinnbefreit, denn du hast eine große CSS-Datei, welche Eigenschaften für viele Elemente lädt, welche gar nicht benötigt werden.

Zuerst musst du dir die passende Klasse im HTML-Code (bei WordPress im reinen Text-Editor) einfügen:

Danach solltest du noch dein Stylesheet (normalerweise die style.css) anpassen. Dazu legst du dir die passende Klasse an und gibst ihr die Hintergrund-Eigenschaften. Wichtig ist die Position mit 50% und auch die Größe in Pixel für die Höhe und Breite.
Vergisst du die Hintergrundgröße, wird das Bild nicht von der Mitte aus beschnitten. Und wenn du die Höhe/Breite nicht angibst, wird das Hintergrundbild gar nicht angezeigt.

Damit hast du jetzt ein quadratisches Bild, welches du immer wieder verwenden kannst. Aber leider ist eben der Wechsel des Bild nicht so einfach mit dem WordPress-Editor möglich.

Die elegante Variante für quadratische Bilder mit CSS

Mit einer neuen Eigenschaft aus CSS3 (object-fit wird auch von allen großen Browsern schon unterstützt) bekommst du eine viel eleganter Variante. Und noch dazu kannst du diese ganz einfach aus dem WordPress-Editor anwenden, wenn du dein Stylesheet einmal angepasst hast. Schauen wir gleich auf das CSS, welches du am Ende deine Stylesheets anfügen kannst.

Dadurch wird das img-Element mit 250px (hoch und breit) dargestellt und die Bildinformation ideal eingepasst. Im WordPress gibst du beim Einfügen eines Bildes nur mit die zusätzliche Klasse pic-square an und schon klappt es mit dem quadratischem Bild.

CSS-Klasse bei einem Bild in WordPress hinzufügen

CSS-Klasse bei einem Bild in WordPress hinzufügen

Die brutale Variante für quadratische Bilder mit CSS

Die Variante kannst (besser solltest) du nur verwenden, wenn es sehr schnell gehen muss und du quadratische Bild nicht oft (besser so gut wie nie) benötigst.

Dazu legst du im WordPress-Texteditor ein div-Element mit dem passenden img-Element an. Danach fügst du einfach einen inline-Style mit der Breite, Höhe und dem overflow-Attribut beim öffnenden Tag ein. Und schon schwingt der Browser den Zauberstab und schneidet dir dein Bild passen ab. Nicht sehr elegant, aber es funktioniert.

Schreibe einen Kommentar

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

Blogheim.at Logo