Höhe und Breite eines HTML Elements mit CSS proportional halten - bei dynamischer Breite/Höhe..

Quelle: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Mit diesem CSS Trick, bekommt man ein div Element, welches immer die selbe Höhe hat, wie es breit ist.


HTML:

<div class="box">
<div class="content">
Aspect ratio of 1:1</div>
</div>

CSS:

.box{
position: relative;
width: 50%;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}

In meinem Fall war es nötig einen runden Kreis hinzubekommen bei dynamischer Breite.
(div wird zum kreis mit border-radius:1000px)