Besonders Porträtbilder werden im Netz oft rund angezeigt. Solche Bilder können Sie mit ein paar Zeilen CSS-Code selber erstellen – ohne dass dabei ein Bild verstümmelt werden muss.
Das nebenstehende Beispielbild wollen wir zu einer runden Sache machen.
Sie benötigen dazu bloss ein paar Angaben im CSS-Code. Zunächst vergeben Sie aber dem Bild eine CSS-Klasse wir schlagen dafür ganz einfach «bild-circle» vor.
Nun wechseln Sie in das CSS-Stylesheet Ihrer Website. Dieses erreichen Sie via Design/Customizer/Zusätzliches CSS. Fügen Sie folgenden Code ein – ersetzen Sie allenfalls die CSS-Klasse mit der von Ihnen gewählten:
© Rainer Sturm/pixelio.de
.bild-circle {
border-radius: 300px;
-moz-border-radius: 300px;
-webkit-border-radius: 300px
}Das war’s auch schon. So sieht das dann am Ende aus:
Die Pixelwerte sollten dem Bild angemessen sein. Unser Beispielbild ist 300x300px gross. Deswegen haben wir auch die Werte auf 300px gesetzt.
Dieser Trick funktioniert mit einem quadratischen Bild. Verwenden Sie hoch- oder querformatige Bilder, ergäbe sich statt eines Kreises eine ovale Form. Kann auch hübsch sein, war hier aber nicht die Idee.
© Rainer Sturm/pixelio.de
Zusatztipp: nur Ecken abrunden
Den Code oben können Sie variieren. Wenn Sie z.B. statt des 300px-Wertes nur 30px eingeben ergibt dies abgerundete Ecken. So wie in diesem Beispiel:
© Rainer Sturm/pixelio.de
Weitere Varianten
Links: jeweils der Code – rechts: das Resultat. Das Bild ist nun 150x150px gross. Darum die veränderten Pixel-Werte im Code.
.bild-window {
border-radius: 150px 150px 0 0;
-moz-border-radius: 150px 150px 0 0;
-webkit-border-radius: 150px 150px 0 0;
}
© Rainer Sturm/pixelio.de
.bild-drop {
border-radius: 150px 150px 150px 0;
-moz-border-radius: 150px 150px 150px 0;
-webkit-border-radius: 150px 150px 150px 0;
}© Rainer Sturm/pixelio.de
.bild-quarter {
border-radius: 0 150px 0 0;
-moz-border-radius: 0 150px 0 0;
-webkit-border-radius: 0 150px 0 0;
}© Rainer Sturm/pixelio.de
.bild-2corners {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
}© Rainer Sturm/pixelio.de
.bild-rounded {
border-radius: 50% / 10%;
-moz-border-radius: 50% / 10%;
-webkit-border-radius: 50% / 10%;
}© Rainer Sturm/pixelio.de
