Feste Seitenverhältnisse bei responsiven HTML-Elementen

[Jörg]

Hallo Experten!

Mein Problem ist: Ich möchte responsive Boxen erzeugen, bei denen Breite und Höhe in einem vorgegebenen Größenverhältnis stehen, als Beispiel nehmen wir ein Quadrat.

Eine Möglichkeit gäbe es sicherlich mit vw, also sowohl width als auch height mit dem gleichen vw-Wert. Aber dann hängt halt alles an der Breite des Viewports, was in manchen Fällen nicht wünschenswert ist.

Wenn ich z.B. width:20% angebe - wie kriege ich es hin, dass die Höhe der Box gleich groß ist wie die Breite?

Auf einer anderen Seite habe ich gelesen, dass man das mit padding-bottom hinkriegt, also z.B. div style="background-color:green; width:20%; padding-bottom:20%;"

Das funktioniert. Weil sich - so die dortige Begründung - die padding-Größe, wenn sie in % angegeben ist, an derselben Basis wie width orientiert.

Aber ist das sauber?? Ist das definierter Standard? Oder gibt es bessere Lösungen?

Vielen Dank schon im Voraus!