Frage CSS: div im festen Seitenverhältnis

[meisterleise]

Hallo Kollegen,
ich habe einen div container mit einer width=100% und möchte das die Höhe immer 1/2,5 der dargestellten Breite hat. Lässt sich das mit CSS umsetzen?
Ich komm' nicht drauf.

 

[MrMurphy]

Ja, indem du die Einheit vw statt Prozent verwendest.

Wobei mir das von dir gewünschte Verhältnis nicht klar ist: Breite: 1 zu Höhe 2,5 (= Hochformat) oder Breite 2,5 zu Höhe 1 (= Breitformat)?

 

[meisterleise]

Hey @MrMurphy das ist schon nah dran, danke!
Mit meiner Maßangabe meinte ich bspw. 1000 px breit x 400 px hoch.

Dein Vorschlag funktioniert auch super und ist so schön einfach. Funktioniert bei mir allerdings nur, wenn die Site auch fullwidth ist. Da die Site jedoch 1.300 px breit ist, habe ich mit der Angabe width=100vw nun das Problem, dass das im Grid liegende div nun links im Grid startet und rechts aus dem Browserfenster verschwindet.

 

[meisterleise]

@Sempervivum ein großes Dankeschön! aspect-ratio macht exakt das, was ich gesucht habe! Hatte noch versucht, das irgendwie mit calc und clamp hinzubiegen, aber das war alles murks, da responsive problematisch. So ist das doch supereinfach!

 

[basti1012]

Mal nee Frage zu den ratio.
Bei deinen 1000px zu 400px.

Ist das

  width:100vw;
  height:calc(100vw / 2.5);

nicht das gleiche wie das

aspect-ratio: 5 / 2;

Oder ist das was anderes und ich verstehe das wieder nicht?
Beim Testen konnte ich jetzt kein Unterschied sehen

 

[basti1012]

Ok.
Durch der Eingabe mit max-width konnte ich die Unterschiede jetzt auch sehen.
Danke