フレックス表示のパーセンテージ幅に基づいて自動的に高さを設定します

Question

フレックス表示の要素が4つあります。表示は列です。標準的な柱基礎格子25％の幅。

この要素は、その役割がバックグラウンドのイメージのコンテナであるため空です（これは私がimgを使用しない理由です）。

この空のdivが自動的に同じ高さになるように、純粋なcss3の方法で存在します。

幅：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幅のため

をカバーしている私は彼らの現在の幅の.instagram-individual-image-container高さが100％を作りたいのですが25％です。

ありがとうございました。あなたは:beforeを使用してpaddingを追加することができ

Answer 1

：

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/