cssを使用して幅に基づいて高さを定義

Question

要素の高さを幅の2/3に設定する必要があります。私はJSのようなものでこれを行うことができることを知っています$(this).height($(this).width()/3*2)

プリプロセッサなしでまっすぐなCSSを使って同じことをすることはできますか？

Answer 1

要素をheight: 0;padding-bottom: 66.67%に設定できますが、すべての子コンテンツを絶対に配置する必要があります。これが実用的かどうかは、要素の内部にあるものによって決まります。

Answer 2

がこの

に人気のハックですが、今、我々はCSS変数/カスタムプロパティを持って、あなたはそれを使用することができますうん。 0;パディング下： 完全

.p{ 
 
    width: 60px; 
 
} 
 

 
.c { 
 
    background-color: cyan; 
 
    width: 100%; 
 
    padding-top: 150%; 
 
} 
 

 
/* advanced css custom properties */ 
 
.a { 
 
    --width: 60px; 
 
    width: var(--width); 
 
    height: calc(var(--width)*1.5); 
 
    background-color: rebeccapurple; 
 
}

 
<!-- hack using padding --> 
 
<div class="p"> 
 
    <div class="c"> 
 
     
 
    </div> 
 
    </div> 
 
    <br> 
 
    
 
    <!-- advanced css using custom properties/ css variables --> 
 
    <div class="a"></div>