title: Automatically set height based on percentage width in flex display
body: <p>I have 4 elements display flex. Are display as columns. Standard zurb foundation grid 25% width.</p>
  
  <p>This elements are empty because their role is be container for image in background (I need to cover this is reason why I don't use <code>img</code>).</p>
  
  <p>Exists in pure css3 manner to make this empty div's automatically same height. </p>
  
  <p>width:25% and when this is 250px height should be 25%.</p>
  
  <p>I can't do it in JS but...it would be great in pure css but my head is empty.</p>
  
  <pre><code>&lt;div class="instagram-recent grid-x"&gt;
    &lt;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';)&gt;
    &lt;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';)&gt;
    &lt;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';)&gt;
    &lt;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';)&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css is Zurb Foundation 6.4.2 and for each 
  <code>.instagram-individual-image-container</code>
  bacground-size is cover</p>
  
  <p>for <code>cell large-3</code> width is 25% I'd like make <code>.instagram-individual-image-container</code> height 100% of their current width.</p>
  
  <p>Thanks in advance for any hints.</p>