nicht angemeldet
Wie Seitenverhältnis von Child <div> beibehalten?
Matthias Apsel
Gunnar BittersmannHallo und danke für eure Zeit,
Werke an folgendem Problem:
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?
Vielen Dank für eure Hilfe, Pauli.
-
Hallo Der ratlose Paul,
(beide <DIV>s haben keine weiteren Inhalte).
So ganz ohne Inhalte?? Vielleicht wäre ein
figure-Element die richtige Wahl? Was möchtest du eigentlich erreichen?Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt. -
@@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-
Herzliches 2020!
....abenteuerlich, wie umständlich man da mit Hacks arbeiten muss... (wirkt ja noch sowas von 2019...) - hoffe echt auf eine baldige Implementierung der aspect-ratio Eigenschaft.
Danke Gunnar für deine Umsetzung! ...jetzt mal ohne Scheiß, wie lang bist du da dran gesessen? :O
-
@@Der ratlose Paul
....abenteuerlich, wie umständlich man da mit Hacks arbeiten muss...
Ich weiß nicht, ob man das muss. Mir ist bloß nichts anderes eingafallen.
...jetzt mal ohne Scheiß, wie lang bist du da dran gesessen? :O
Hm, weiß ich jetzt gar nicht mehr. Code ist es ja nicht viel, wenn man erstmal die Idee hat.
Und wie’s mit Ideen so ist: die können einem sofort kommen oder erst nach drei Tagen …
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
-
-
P.S.:
(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 🖖
...Es geht im Prinzip darum, dass mehren DIVs mit einem [starren] 16:9 Verhältnis Inhalte dynamisch zugewiesen werden oder eben auch nicht, "leere" DIVs weisen dann je nach Modus eine gewisse Hintergrundfarbe und / oder Muster auf (eine relativ komplizierte Angelegenheit).
Hab das Beispiel aber auf den Kern heruntergebrochen und den für mein Anliegen unerheblichen Code entfernt (macht die Sache für alle AnwesendInnen nur noch mühseliger)
Danke nochmal!
-