Div container Prozentuel + Quadratisch positionieren

[ein Ivan ^-^]

Ich möchte einen Div Container auf meiner Homepage so ausrichten, dass er, egal welche form das fenster hat, seine Quadratische form beibehält, sie allerdings prozentuel zur höhe verkleinert, ich bin nähmlich noch zu dumm dafür, danke :)

 

[scbawik]

Dafür brauchst du entweder JavaScript oder du nimmst ein quadratisches Bild zu Hilfe welchem du 100% Höhe gibst und es in dein Div packst. Mit CSS geht das nicht. Beispiel:

<div style="position:relative;width:auto;height:auto;">
    <img src="quadratisches_bild.jpg" height="100%" alt="" style="visibility:hidden">
</div>

 

[relaxer]

Das geht mit CSS in folgender Weise:

CSS:

.panel {
position:relative;
width:50%;
padding-top:50%;
}

.content {
position:absolute;
height:100%;
width:100%;
margin-top:-100%;
}

HTML:
<div class='panel'>
<div class='content'>
Hallo Welt
</div>
</div>