Hallo Gunnar,

Größenberechnungen funktionieren entweder von außen nach innen oder von innen nach außen. Wenn Du Maße angibst, die Rechnungen in beide Richtungen brauchen, scheitern die Browser regelmäßig.

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

Dann berechne ihn entsprechend, und lass das Innenleben komplett davon dominieren. 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.

Jedenfalls hat die doppelte Angabe von aspect-ratio bei main und picture bei Dir den Effekt, dass die beiden Krieg führen. Scheint mir. Warum es bei den iframes so viel besser geht, hm. Mag an den imgs darin liegen, die intrinsische Größen mirbringen. Ein contain:size könnte helfen, aber der setzt fixe Größen außenrum voraus und die kriegst Du mit max-height nicht. Du müsstest die Höhe explizit aus der Breite berechnen, und du müsstest mit Medienabfragen (sofern die var() enthalten dürfen) sicherstellen, ob die Viewporthöhe oder Viewportbreite das dominierende Element ist. Ggf. gelingt das mit einem container-type:size auf dem Body - keine Ahnung.

Rolf