Höhe automatisch auf der prozentualen Breite im Flex-Display einstellen

Question

Ich habe 4 Elemente Display Flex. Werden als Spalten angezeigt. Standard vorb Fundamentgitter 25% Breite.

Diese Elemente sind leer, weil ihre Rolle Container für Bild im Hintergrund sein soll (ich muss dies abdecken, warum ich img nicht verwende).

Existiert in reiner CSS3 Weise, um diese leere div automatisch die gleiche Höhe zu machen.

Breite: 25% und wenn dies 250px ist, sollte die Höhe 25% betragen.

Ich kann es nicht in JS tun, aber ... es wäre großartig in reinem css, aber mein Kopf ist leer.

<div class="instagram-recent grid-x"> 
    <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> 
    <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> 
    <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> 
    <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> 
</div> 

css ist ZURB Foundation 6.4.2 und für jede .instagram-individual-image-container bacground-Größe ist

decken

für cell large-3 Breite 25% Ich mag würde .instagram-individual-image-container Höhe von 100% ihrer aktuellen Breite machen.

Vielen Dank im Voraus für Hinweise.

Answer 1

Sie könnten :before verwenden und fügen Sie padding:

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#parent { 
 
    display: flex; 
 
    flex-flow: row; 
 
} 
 

 
.child:before{ 
 
    content: ''; 
 
    padding: 50% 0; /* vertical value as 100% equals width */ 
 
    display: inline-block; 
 
} 
 

 
.child { 
 
    width: 25%; 
 
} 
 

 
#child1 { 
 
    background: red; 
 
} 
 

 
#child2 { 
 
    background: blue; 
 
} 
 

 
#child3 { 
 
    background: green; 
 
} 
 

 
#child4 { 
 
    background: yellow; 
 
}

<div id="parent"> 
 
    <div class="child" id="child1"></div> 
 
    <div class="child" id="child2"></div> 
 
    <div class="child" id="child3"></div> 
 
    <div class="child" id="child4"></div> 
 
</div>

Answer 2

Sie es wie dies tun können, aber die Inhalte, die Sie in den divs setzen wollen sie zu, muss mit position:absolute;

platziert werden

https://jsfiddle.net/4jz26uyn/1/