Jörg: Feste Seitenverhältnisse bei responsiven HTML-Elementen

Beitrag lesen

problematische Seite

"Aber das geht doch nur solange das Containerelement dazu passt und dann auch nur wenn dir der Inhalt in dem Quadrat keinen Strich durch die Rechnung macht, oder?"

Das stimmt natürlich. Sobald man den Container mit irgendwelchem Inhalt füllt (was man ja gelegentlich tut), kommt in der Tat kein Quadrat mehr dabei heraus.

Es sei denn, man wendet folgenden Trick an:

<div style="background:green; width:20%; padding-top:20%; position:relative;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">Bla Bla</div>
</div>

Das ist natürlich auch alles andere als sauber... Aber anscheinend gibt es wirklich noch keine besseren Lösungen...