Runde Bilder
Sie möchten runde Bilder auf Ihren Webseiten anzeigen? Nichts einfacher als das! Die folgende kleine CSS-Regel genügt:
.image-circle img{
border-radius: 50%;
}
border-radius: 50%;
}
Hinterlegen Sie diese Regel am einfachsten im CSS-Code für Ihr Projekt auf der Registerkarte "Global", siehe hierzu: Eigenen CSS-Code für ein Projekt hinterlegen.
Danach weisen Sie die Klasse image-circle den gewünschten Multimedia-Absätzen zu, siehe hierzu auch: Eigene CSS-Klassen für Absätze verwenden. Fertig!
Danach weisen Sie die Klasse image-circle den gewünschten Multimedia-Absätzen zu, siehe hierzu auch: Eigene CSS-Klassen für Absätze verwenden. Fertig!
Hinweis
Damit die Bilder perfekt rund dargestellt werden, sollte der gewählte Bildausschnitt gleich hoch wie breit sein. Andernfalls wird aus dem Kreis ein Oval. Zudem sollte das Bild selber etwas grösser als der Bildausschnitt sein und sich farblich genug vom Seitenhintergrund abheben, damit das Rund gut zur Geltung kommt.
Dieser Tipp lässt sich übrigens ideal mit dem Tipp für Bilderrahmen kombinieren.
