根據柔性顯示中的百分比寬度自動設置高度

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/