@@Rolf B

Was ist deine Prime Directive? Dass der main Bereich den Viewport maximal ausfüllt, aber nicht darüber hinausragt?

Genau. Das Wohl des Einen (main) wiegt genauso viel wie das Wohl der Vielen (Iframes).

Jedenfalls hat die doppelte Angabe von aspect-ratio bei main und picture bei Dir den Effekt, dass die beiden Krieg führen. Scheint mir.

Ähm, ja. Ich Trottel! Der Ästhetik willen hatte ich das Seitenverhältnis der Planetenbilder vom Fernsehformat auf goldenen Schnitt geändert, das Seitenverhältnis von main aber weiterhin auf der Grundlage von 16 : 9 berechnet.

Im neuen Codepen auf 1.62 geändert – schon geht’s. Fast, jedenfalls: Ein kleines Bisschen ragen die Bilder immer noch aus main raus – aber nicht mehr aus dem Viewport. Wegen der Gaps.

Beachte auch die Gaps - wenn dein main Element ein 4x4 Grid ist mit 1em Gap, dann ist der aspect-ratio von main-Element und Gridzellen nicht identisch. Das könnte man ggf. durch gap: 1.6em 0.9em lösen.

Ähm, nein! Das sähe ja furchtbar aus! Der Ästhetik willen sollten die Gaps horizontal und vertikal schon gleich sein. (Es hat seinen Grund, warum Programmierer nicht das UI designen sollten.)

Die Zutaten zur Berechnung des genauen Seitenverhältnisses von main sollten mit --rows und --columns vorhanden sein. Ich kann aber mit der Näherung leben. Oder ich mach ein „Mathematik zum Wochenende“ draus, dann muss ich nicht selber rechnen. 😆

Kwakoni Yiquan