維持寬高比縮水

Question

當我做了一個圈子，但我希望它保持1圈響應：

<div class='container'> 
    <div class='circle'></div> 
</div> 

CSS：

.container { 
    display: flex; 
    border: 2px solid black; 
    justify-content: center; 
    align-items: center; 
} 

.circle { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
    border-radius: 50%; 
} 

Codepen：https://codepen.io/drhectapus/pen/aWMgZx

Answer 1

，使用T他padding-bottom長寬比技巧（read more）讓圓圈保持1：1的比例。

.container { 
 
    display: flex; 
 
    border: 2px solid black; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.circle { 
 
    width: 500px; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
} 
 

 
.circle::before { 
 
    content: ''; 
 
    display: block; 
 
    padding-bottom: 100%; 
 
}

<div class="container"> 
 
    <div class="circle"></div> 
 
</div>

或者，你可以在vw（視口寬度）爲單位指定圓的寬度和高度，有元素保持相同的相對寬度和高度爲你的瀏覽器大小調整 - 就像width: 10vw; height: 10vw;。