親divの幅に対する要素の高さを定義

Question

親divの幅に基づいて要素の高さを設定するにはどうすればよいですか？

私は

height: <some_ratio>vw 

をすれば、私は、ビューポートの幅のsome_ratioに等しい高さを取得しています。 親divの幅のsome_ratioが必要です。 これは可能ですか？

（私は、これは、ブートストラップのcolsの広場の要素を生成する必要があります。したがって、これらの要素の高さは、COLの幅と等しくなければなりません）

Answer 1

あなたは純粋なCSSの方法をしたい場合は、0に子供の高さを設定することができますがそしてその後割合を:)設定するパディング底を使用する（パディングは幅に基づいて、さらに上部/下部パディング）

.parent{ 
 
    height: 100px; 
 
    width: 300px; 
 
    background: red; 
 
} 
 
.child{ 
 
    background: blue; 
 
    width: 50px; 
 
    height: 0; 
 
    padding-bottom: 25%; 
 
}

<div class="parent"> 
 
<div class="child"> 
 
</div> 
 
</div>