Flexible Divs mit festem Seitenverhältnis

Die Breite von Divs, die sauber in Spalten passen, kann leicht als Faktor der Spaltenzahl angegeben werden:
.block-aspect {width:calc(100% / 3);}
bringt genau 1/3 der verfügbaren Breite also 3 Spalten!

Das folgende, leere Pseudo Element bekommt eine y-Dimension mit
.block-aspect:before {padding-top:100%; content:''; display:block;}

Der Wert padding-top bezieht sich auf die Breite des Parent. 100% bringt also ein Quadrat, 50% ein Seitenverhältnis von 2:1, 150% entsprechen 2:3 usw.

Hier wird ein weiterer Div absolut eingefügt und an allen vier Ecken absolut positioniert. Bisschen unerwartet, aber gut Browser unterstützt:
.tile {position:absolute;top:0;right:0;bottom:0;left:0;}

Seitenverhältnis:

 

Container Breite:

 

Spalten:

 
 
 

1 2 3 4 5 6 7 8 9

 

Bisschen Text

1 12 113 11114 111115 11114

 

Generierter Code HTML / CSS

HTML

<div class="aspect-box">

<div class="block-aspect">

<div class="aspect-spacer">&nbsp;</div>

<div class="tile">

<h2>1 2 3 4 5 6 7 8 9</h2>

</div>

</div>

<div class="block-aspect">

<div class="aspect-spacer">&nbsp;</div>

<div class="tile">

<h2>Bisschen text!</h2>

<p>1 12 113 11114 111115 11114</p>

</div>

</div>

</div>

CSS

.aspect-box {width: 50%; border: 1px solid #ccc; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}

.block-aspect {float:left; width:calc(100% / 2); position:relative;}

.aspect-spacer {content:""; display:block; padding-top:100%;}

.tile {position: absolute; top:0; right:0; bottom: 1rem;left: 1rem;}

 {jcomments on}

Go-Lux Info

Quick Menu

Go-Lux.de verwendet Cookies.

Mit der Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Hinweise zum Datenschutz 

OK