维持宽高比缩水

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;。