• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS: div im festen Seitenverhältnis

meisterleise

Mitglied
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. :rolleyes:
 

MrMurphy

Senior HTML'ler
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

Mitglied
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.
 

Sempervivum

Senior HTML'ler
Ich komm' nicht drauf. :rolleyes:
Das braucht nicht zu verwundern, denn das ist auch gar nicht so einfach in CSS. Es gibt etwas, womit man das Seitenverhältnis direkt definieren kann:

Dann gibt es noch einen Trick mit Padding:
aber da es ein undurchsichtiger Trick ist, nicht empfehlenswert.

Oder man berechnet es mit Javascript, wie es der Fragesteller bei Stackoverflow erwähnt.

Edit: Die Angaben bei css-tricks sind offenbar veraltet, was den Browsersupport betrifft:
Daher spricht nichts dagegen, diese Eigenschaft einzusetzen.
 
Zuletzt bearbeitet:

meisterleise

Mitglied
@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!
 

Sempervivum

Senior HTML'ler
aspect-ratio ist relativ neu und es war überfällig, dass so etwas kommt, denn die Anforderung, ein bestimmtes Seitenverhältnis einzustellen gibt es häufig. Wie ich sehe, ist der Artikel auf css-tricks vom Januar dieses Jahres. Erfreulich, dass die Browserunterstützung sich so schnell verbessert hat.
 

basti1012

Senior HTML'ler
Mal nee Frage zu den ratio.
Bei deinen 1000px zu 400px.

Ist das
Code:
  width:100vw;
  height:calc(100vw / 2.5);
nicht das gleiche wie das
Code:
aspect-ratio: 5 / 2;
Oder ist das was anderes und ich verstehe das wieder nicht?
Beim Testen konnte ich jetzt kein Unterschied sehen
 

Sempervivum

Senior HTML'ler
Es verhält sich nur gleich, wenn der Container das Browserfenster horizontal ausfüllen soll. Begrenzt man z. B. die Breite durch ein max-width, funktioniert der erste Code nicht mehr. Oder wenn es mehrere Container nebeneinander gibt, funktioniert es ebenfalls nicht mehr oder nur mit Rechnerei.
 
Werbung:
Oben