nicht angemeldet
Gunnar Bittersmann@@Der ratlose Paul
Ich habe ein Parent-<DIV>, das sich dynamisch an die Fenstergröße [width: 40vw und height: 40vh] anpasst, daher ist es je nach Fenstergröße manchmal breiter, manchmal höher.
Ein Child-<DIV> soll sich nun in einem Seitenverhältnis von immer genau 16:9 [object-fit: contain ?] an das Parent-DIV anpassen und dabei so viel Platz wie möglich einnehmen (beide <DIV>s haben keine weiteren Inhalte).
Ist das nur mit CSS überhaupt möglich?
Ja, geht – mit dem padding hack: height: 0; padding-top: <percentage>. (Die Prozente des vertikalen Paddings beziehen sich auf die horizontale Breite des Elements.)
Das geht in diesem Fall aber nur, wenn das äußere <div> (nennen wir’s bull) höher ist als das innere (nennen wir’s bull’s eye).
Da aber das bull genau das Seitenverhältnis des Viewports hat, kann man mit einem media query @media (min-aspect-ratio: 16/9)
darauf reagieren und Höhe und Breite vertauschen und das Ganze um eine Vierteldrehung drehen. Beim bull’s eye muss dann mit dem Kehrwert des Seitenverhältnisses gerechnet werden.
☞ Codepen
Zukünftig wird das wohl mal ohne padding hack möglich sein – mit der aspect-ratio-Eigenschaft.
Siehe Rachel Andrews Artikel Designing An Aspect Ratio Unit For CSS.
(beide <DIV>s haben keine weiteren Inhalte).
?? Was soll das überhaupt werden? Soll das bull’s eye vielleicht ein Hintergrundbild bekommen – was eigentlich lieber ein richtiges <img> wäre?
LLAP 🖖
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
Matthias Apsel