CSSの高さは、この場合、関連する幅

Question

で等しく、私はこのようなCSS持っている：

.w{ 
    width:80%; 
    display:block; 
} 

.d{ 
    width:14%; 
    display:inline-block 
} 

をし、それは私のhtmlそこで質問がある

<div class="w"> 
    <a href="#" class="d">1</a> 
    <a href="#" class="d">2</a> 
    <a href="#" class="d">3</a> 
    <a href="#" class="d">4</a> 
    <a href="#" class="d">5</a> 
</div> 

だ、.d高さを作ることは可能ですそれと同じ幅ですか？ 私はいくつかのようなものを意味する：height: 14% OF WIDTH。 私はCSS hereのすべてのユニットを読みましたが、役に立たないものは見つかりませんでした。

Answer 1

JavaScriptを使用できず、ビューポートに関連付けることができる場合は、幅と高さを設定できますビューポートの幅の同じ％

.w{ 
 
    width:80vw; 
 
    display:block; 
 
} 
 

 
.d{ 
 
    width:11.2vw; 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    height:11.2vw; 
 
}

<div class="w"> 
 
    <a href="#" class="d">1</a> 
 
    <a href="#" class="d">2</a> 
 
    <a href="#" class="d">3</a> 
 
    <a href="#" class="d">4</a> 
 
    <a href="#" class="d">5</a> 
 
</div>