Es gibt keinen direkten Weg die Höhe z.B. eines div Elementes relativ zur Breite zu bestimmen. CSS-Anweisungen wie z.B. height:50% bewirken nichts. Ausschließlich absolute Werte wie beispielsweise height:100px erlauben es, einem div Element eine Höhe zu geben. Ein quadratisches Element, das sich bestenfalls in der Höhe seiner Breite anpasst ist nicht möglich.
Doch, es ist möglich...
Sie sehen zwei rote Felder. Eines ist quadratisch, das andere hat die halbe Höhe der Breite. Ändern Sie die Fenstergröße Ihres Browsers. (Firefox: SHIFT+STRG+M). Die Höhen der roten Bereiche passen sich der Breite proportional an.