保持圈的高寬比當窗口重新大小

Question

我有一字排開使用Flexbox的圈子，他們看起來體面的小屏幕寬度：

，但只要我擴大我的屏幕的寬度，他們看起來非常舒展。但我需要他們從每一個潛在客戶中脫穎而出。

我不知道，也許有，修復它們對不同尺寸的屏幕顯示方式。也許我可以使用一些媒體查詢。如何處理這個？

JSFiddle

HTML

<div class="dashboard-grey-menu"> 
    <div class="flex row no-padding"> 
    <div class="col"><div class="circle"></div></div> 
    <div class="col"><div class="circle"></div></div> 
    <div class="col"><div class="circle"></div></div> 
    <div class="col"><div class="circle"></div></div> 
    </div> 
</div> 

CSS

.dashboard-grey-menu { 
    height: 30vh; 
    background-color: #959595; 
    } 

    .circle { 
    border-radius: 50%; 
    width: 15vw; 
    height: 25vh; 
    background-color: #B7B7B7; 
    margin: auto; 
    } 

.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 30vh; 
    width: 100%; 
} 

Answer 1

您必須設置width和你的圈子同等價值的height：

.dashboard-grey-menu { 
 
    height: 30vh; 
 
    background-color: #959595; 
 
} 
 
.circle { 
 
    border-radius: 50%; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: #B7B7B7; 
 
    margin: 20px; 
 
} 
 
.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 30vh; 
 
    width: 100%; 
 
}

<ion-content has-header="false"> 
 
    <div class="dashboard-grey-menu"> 
 
    <div class="flex row no-padding"> 
 
     <div class="col"><div class="circle"></div></div> 
 
     <div class="col"><div class="circle"></div></div> 
 
     <div class="col"><div class="circle"></div></div> 
 
     <div class="col"><div class="circle"></div></div> 
 
    </div> 
 
    </div> 
 
</ion-content>