根据柔性显示中的百分比宽度自动设置高度

Question

我有4个元素显示柔性。显示为列。标准zurb基础网格25％宽度。

这个元素是空的，因为它们的作用是对背景图像容器（我需要支付这就是为什么我不使用img）。

以纯css3的方式存在，使这个空div的自动相同的高度。

宽度：25％，当这是250px高度应该是25％。

我不能做到这一点的JS，但...这将是纯CSS伟大的，但我的脑袋是空的。

<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是Zurb基金会6.4.2和每个 .instagram-individual-image-container bacground尺寸是覆盖

为cell large-3宽度是25％，我想使.instagram-individual-image-container高度的当前宽度的100％。

在此先感谢您的任何提示。

Answer 1

你可以使用:before，并添加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

你可以像这样做，但是，你想提出的div里面的内容，必须放在与position:absolute;

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