Skip to main content

Rahmen für Bilder (HTML)

Für HTML-Ausgaben können Sie CSS verwenden, um Rahmen um Bilder und Abschnitte hinzuzufügen, die Bilder enthalten. Sie können beispielsweise eine rosa gepunktete Linie um Ihre Bilder einfügen, wie diese:

Image of a space shuttle. There is a dotted pink border around the image.

Um den rosa gepunkteten Linienrahmen zu erstellen, haben wir dieses CSS verwendet:

.mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

Unser CSS-Styling-Beispiel funktioniert folgendermaßen:

  • Das .mediaobject img definiert die Klasse, die wir gestalten wollen. Es gibt verschiedene Klassen für die verschiedenen Bildtypen, wie in Rahmen auf allen Bildern (HTML) erläutert.

  • border: definiert den Beginn der Rahmengestaltung.

  • 3px ist die Breite der Rahmenlinie

  • gepunktet ist der Stil der Rahmenlinie

  • #FF1493 ist die Farbe

  • padding: definiert den Beginn der Padding-Gestaltung. Das Padding ist der Abstand zwischen dem Bild und dem Rand.

Wenn Sie Ihre eigenen Rahmen gestalten, können Sie ähnliche CSS verwenden. Es gibt auch andere Rahmenstile, die Sie anwenden können. Wenn Sie mehr darüber erfahren möchten, empfehlen wir Ihnen die Website w3schools als Quelle.

Anmerkung

Informationen zum Einstellen der Bildrahmen für PDF-Ausgaben finden Sie unter Rahmen für Bilder (PDF).