寬度等於高度

Question

我有一個容器和兒童元素。容器的位置固定在10％的高度。每個子元素必須有100％的高度和寬度等於它的高度 - 當我添加我的容器水平擴展而不是垂直時，這會變得更加複雜。我想問一下，如果這可以使用CSS，因爲使用JavaScript可以很容易地實現，但我不得不傾聽窗口大小，這是一個痛苦，我想避免這種情況。

.container { 
    width: 200px; 
    height: 10%; 
    border: solid 1px black; 
    position: fixed; 
    top: 0; 
    left: 0; 
    white-space: nowrap; 
    overflow: auto; 
} 

.container > div { 
    display: inline-block; 
    height: 100%; 
    width: 50px; 
    border-radius: 50%; 
    border: solid 1px black; 
} 

https://jsfiddle.net/fdtajx3k/1/

Answer 1

下可能做的伎倆爲您服務。

你的孩子div元素，使用視單位vh兩個寬度 和高度值。

此外，如果滾動條是問題，請在父容器上添加一些底部填充（可選）。

參考：https://www.w3.org/TR/css3-values/#viewport-relative-lengths

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width: 200px; 
 
    height: 10%; 
 
    border: solid 1px black; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    padding-bottom: 30px; 
 
} 
 

 
.container > div { 
 
    display: inline-block; 
 
    height: 10vh; 
 
    width: 10vh; 
 
    border-radius: 50%; 
 
    border: solid 1px black; 
 
    box-sizing: border-box; 
 
}

<div class=container> 
 

 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 

 
</div>