From 2bd13f0f19c764df60f39dafac1200dbccee39eb Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Thu, 8 Oct 2026 21:07:31 +0200 Subject: [PATCH] Breitbild sass oben statt mittig MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ein 21:9-Film war in der Breite richtig und in der Höhe nicht: der schwarze Rand lag ganz unten statt gleichmässig oben und unten. Im Fenster fällt das kaum auf, im Vollbild sofort. Gemessen an einem 2560×1080-Film in einem 1024×768-Fenster: Hülle 768 hoch Videokasten 459 hoch, bei oben 0 Woran es lag: die Hülle ist ein Raster mit `place-items: center`. Damit wird das Videoelement nicht gedehnt, und sein `height: 100%` löst sich gegen eine Zeile auf, die ihre Höhe wiederum aus dem Element nimmt — die Prozentangabe hatte nichts, woran sie sich halten konnte. Herausgekommen ist ein Kasten, der weder die volle Höhe hatte noch mittig sass. Jetzt liegt das Videoelement im grossen Spieler absolut über der ganzen Hülle. `object-fit: contain` rechnet damit gegen den vollen Bildschirm und legt den Rand von selbst zu gleichen Teilen oben und unten — in beiden Richtungen, nicht nur in der einen, die vorher stimmte. Nachher dieselbe Messung: Kasten 1024 × 768, oben 0. Die kleine Leiste bleibt unberührt — sie positioniert dasselbe Element ohnehin absolut und mit eigenen Massen; deshalb das `:not(.pl-klein)`. Nachgemessen: 128 × 70, `object-fit: cover`, unverändert. Co-Authored-By: Claude Opus 5 --- web/app/src/style.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/web/app/src/style.css b/web/app/src/style.css index 39801d2..f1dca6b 100644 --- a/web/app/src/style.css +++ b/web/app/src/style.css @@ -838,6 +838,26 @@ textarea.feld { } .pl-video { width: 100%; height: 100%; object-fit: contain; background: #000; } +/* **Das Bild füllt die Fläche, dann sitzt es auch mittig.** + * + * Gemessen an einem 21:9-Film auf einem 1024×768-Fenster: die Hülle war + * 768 hoch, der Videokasten 459 — und er klebte bei oben 0. Die Breite + * stimmte, die Höhe nicht, und der schwarze Rand lag ganz unten statt + * gleichmässig oben und unten. Im Fenster fällt das kaum auf, im Vollbild + * sofort. + * + * **Woran es lag.** Die Hülle ist ein Raster mit `place-items: center`. + * Damit wird das Videoelement nicht gedehnt, und sein `height: 100%` löst + * sich gegen eine Zeile auf, die ihre Höhe wiederum aus dem Element nimmt — + * die Prozentangabe hatte nichts, woran sie sich halten konnte. + * + * Absolut über die ganze Hülle nimmt die Frage weg: `object-fit: contain` + * rechnet dann gegen den vollen Bildschirm und legt den schwarzen Rand von + * selbst zu gleichen Teilen oben und unten. Die kleine Leiste positioniert + * dasselbe Element ohnehin absolut und bleibt unberührt — deshalb das + * `:not(.pl-klein)`. */ +.pl:not(.pl-klein) .pl-video { position: absolute; inset: 0; } + .pl-dreher { position: absolute; margin: 0; } /* Kopf und Leiste blenden sich weg, während etwas läuft. */