Test: Bildausrichtung

Dies ist kein klassischer Blog-Artikel. Dieser Eintrag ist eher vergleichbar mit dem guten alten Testbild. Daher erscheint er nicht in der Listenansicht von Posts:

build:
  render: always
  list: never

Und sollte auch von keiner Suche indexiert werden.

noindex: true
sitemap:
  disable: true

Es ist ein Post von mir für mich, mit dem ich die Medien- und Textdarstellung meiner Website prüfen kann.

01. Kleines Bild zentriert#

Dieser Text muss unterhalb des Bildes stehen.

02. Kleines Bild links#

Dieser Text muss rechts des Bildes erscheinen. Das Bild muss am linken Rand sein.

03. Kleines Bild rechts#

Dieser Text muss links des Bildes erscheinen. Das Bild muss am rechten Rand sein.

04. Großes Bild, zentriert und skaliert#

Das Bild darf nicht größer sein als die Ränder der Textebene.

05. Großes Bild, links#

Rechts des Bildes muss noch Text hinpassen.

06. Großes Bild, rechts#

Links des Bildes muss noch Text hinpassen.

07. Zwei aufeinanderfolgende Bilder#

Die Rahmen der Bilder dürfen sich nicht berühren.

08. Defekter Bildlink#

Hier erwarte ich den Alternativtext zum Bild zu lesen.

09. Bild mit Titel und Attribution#

Bilddarstellung rechts mit Titel. Der Textumbruch muss funktionieren: Mehrere Zeilen statt überbreiter Rahmen.

10. Bild und Stichpunkte#

• Die Stichpunkte erscheinen rechts vom Bild.
• Es gibt keine Kollision oder Überlapp.
• Die Listendarstellung bleibt konsistent,
• auch wenn das Bild links endet.

11. Bild zwischen Überschriften#

Diese Überschrift darf das Bild nicht überlappen oder stören.#

Das zentrierte Bild hat keinen Textfluss. Auch Überschriften haben nichts neben dem Bild verloren.

12. Bild vor einem Zitat#

Dieses Zitat hat Begrenzungslinien oben und unten, welche nicht mit dem Bild kollidieren dürfen.

13. Bild vor einem Verweis#

Dieser Testverweis darf nicht in das Bild hineinragen. Funktioniert der Textumbruch richtig?¹

14. Bild neben einem langen Textblock#

Mit diesem Absatz prüfe ich, ob der Textfluss um das Bild herum korrekt funktioniert. Dabei erwarte ich in der Desktopansicht eine Breite des Bildes von 60%; der Rest verbleibt für den umfließenden Text. In der Mobilansicht werden Bilder stets zentriert dargestellt, daher dürfte es dort gar nicht erst zu Problemen kommen können.

15. Video zentriert#

Das Video wird nicht beschnitten und korrekt dargestellt. Ist es zu breit, wird es auf die maximale Breite der Textebene herunterskaliert.

16. Audio mit Titel#