Automatically set height based on percentage width in flex display

Question

I have 4 elements display flex. Are display as columns. Standard zurb foundation grid 25% width.

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 img).

Exists in pure css3 manner to make this empty div's automatically same height.

width:25% and when this is 250px height should be 25%.

I can't do it in JS but...it would be great in pure css but my head is empty.

<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 is Zurb Foundation 6.4.2 and for each .instagram-individual-image-container bacground-size is cover

for cell large-3 width is 25% I'd like make .instagram-individual-image-container height 100% of their current width.

Thanks in advance for any hints.

Supplying code for both layout and styling makes debugging and identification of the problem a lot easier. Please supply the relevant code you have. — G.Hunt, Aug 30 '17 at 12:41

score 1 · Accepted Answer · answered Aug 30 '17 at 12:56

You could use :before and add 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>

score 1 · Answer 2 · answered Aug 30 '17 at 13:06

1

You can do it like this, however the content that you wanna put inside the divs, must be placed with position:absolute;

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

answered Aug 30 '17 at 13:06

Ovidiu Unguru

756
5
14

Automatically set height based on percentage width in flex display

2 Answers2