Bildkomponente gibt bei mode fit falsche Masse aus und erzeugt Layout-Spruenge #140

Merged

Phil merged 1 commit from fix/bildmasse-bei-fit into main

2026-09-10 08:53:56 +00:00

Phil commented

2026-09-10 08:53:51 +00:00

Owner

Behebt einen Layout-Sprung, der jedes fit-Bild der Seite betrifft — auch das Hero-Porträt über der Falz.

Ursache

Bei mode: fit skaliert Craft das Bild in die angeforderte Box hinein und behält sein Seitenverhältnis. Die erzeugte Datei hat deshalb andere Maße als die Box:

angefordert	tatsächliche Datei
`600 × 1000`	526 × 1000
`850 × 1000`	618 × 1000

Ausgegeben wurden trotzdem die angeforderten Werte. Der Browser reservierte damit Platz im falschen Seitenverhältnis und korrigierte beim Laden auf das echte — alles darunter rutschte nach.

Änderung

asset.getWidth(transform) / getHeight(transform) mit demselben Transform wie fallbackSrc. Craft kennt die fit/crop- und Upscale-Logik bereits; eine Rechnung in Twig hätte sie dupliziert und wäre bei einer Config-Änderung stillschweigend auseinandergelaufen. Bei crop ändert sich nichts, dort füllt das Bild die Box exakt. Ist nur eine Seite angefordert, löst Craft die andere über das natürliche Seitenverhältnis auf.

Verifikation (ausgeführt)

Ausgegebene Maße gegen die Dateien auf der Platte: height="1000" width="618" und height="1000" width="526" — exakte Übereinstimmung.

Sektionshöhen direkt nach dem Laden und nach vollem Durchscrollen, beide Breiten, identisch:

390×844   719,1450,1433,1949,587,807,1848,1655,524,2024,1368,1020   (16.219 px)
1440×900  1006,1257,1634,1019,326,670,2201,1202,653,2521,1402,1021  (15.493 px)

Vorher sprang Sektion 8 bei 390 px von 1597 auf 1655 px. Der Sprung ist weg, nicht verkleinert.

Gate	vorher	nachher
`reduced_motion`	FAIL 2,09 % @390	PASS 0,13 % / 0,30 %
`overflow`	PASS	PASS
`balance`	PASS	PASS

Closes #139

🤖 Generated with Claude Code

https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Behebt einen Layout-Sprung, der jedes `fit`-Bild der Seite betrifft — auch das Hero-Porträt über der Falz. ## Ursache Bei `mode: fit` skaliert Craft das Bild **in** die angeforderte Box hinein und behält sein Seitenverhältnis. Die erzeugte Datei hat deshalb andere Maße als die Box: | angefordert | tatsächliche Datei | |---|---| | `600 × 1000` | **526 × 1000** | | `850 × 1000` | **618 × 1000** | Ausgegeben wurden trotzdem die angeforderten Werte. Der Browser reservierte damit Platz im falschen Seitenverhältnis und korrigierte beim Laden auf das echte — alles darunter rutschte nach. ## Änderung `asset.getWidth(transform)` / `getHeight(transform)` mit demselben Transform wie `fallbackSrc`. Craft kennt die `fit`/`crop`- und Upscale-Logik bereits; eine Rechnung in Twig hätte sie dupliziert und wäre bei einer Config-Änderung stillschweigend auseinandergelaufen. Bei `crop` ändert sich nichts, dort füllt das Bild die Box exakt. Ist nur eine Seite angefordert, löst Craft die andere über das natürliche Seitenverhältnis auf. ## Verifikation (ausgeführt) Ausgegebene Maße gegen die Dateien auf der Platte: `height="1000" width="618"` und `height="1000" width="526"` — exakte Übereinstimmung. Sektionshöhen direkt nach dem Laden und nach vollem Durchscrollen, beide Breiten, **identisch**: ``` 390×844 719,1450,1433,1949,587,807,1848,1655,524,2024,1368,1020 (16.219 px) 1440×900 1006,1257,1634,1019,326,670,2201,1202,653,2521,1402,1021 (15.493 px) ``` Vorher sprang Sektion 8 bei 390 px von 1597 auf 1655 px. Der Sprung ist weg, nicht verkleinert. | Gate | vorher | nachher | |---|---|---| | `reduced_motion` | FAIL 2,09 % @390 | **PASS 0,13 % / 0,30 %** | | `overflow` | PASS | PASS | | `balance` | PASS | PASS | Closes #139 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Phil added 1 commit

2026-09-10 08:53:51 +00:00

fix(images): tatsaechliche Transform-Masse ausgeben statt angeforderter 0bcd1c0ffd

Bei mode fit skaliert Craft das Bild in die angeforderte Box hinein und
behaelt sein Seitenverhaeltnis -- die erzeugte Datei hat deshalb andere
Masse als die Box. _600x1000_fit liefert tatsaechlich 526x1000,
_850x1000_fit liefert 618x1000.

Ausgegeben wurden trotzdem die angeforderten Werte. Der Browser
reservierte damit Platz im falschen Seitenverhaeltnis und korrigierte
beim Laden auf das echte, wodurch alles darunter nachrutschte. Bei
390 px wuchs die Sektion "Wer ist Philipp Luetje" so um 58 px.

getWidth()/getHeight() mit demselben Transform fragen Craft nach dem,
was wirklich entsteht -- inklusive der fit/crop- und Upscale-Logik, die
eine Twig-Rechnung nur dupliziert haette. Bei crop aendert sich nichts,
dort fuellt das Bild die Box exakt.

Closes #139

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Phil merged commit c4662577e2 into main

2026-09-10 08:53:56 +00:00

Phil deleted branch fix/bildmasse-bei-fit

2026-09-10 08:53:56 +00:00

Phil referenced this pull request from a commit

2026-09-10 08:53:57 +00:00

Merge pull request 'Bildkomponente gibt bei mode fit falsche Masse aus und erzeugt Layout-Spruenge' (#140) from fix/bildmasse-bei-fit into main