Seitenverhältnis von Kreisen zu pflegen, wenn das Fenster wieder Größen

Question

Ich habe Kreise mit Flexbox ausgekleidet und sie sehen anständig auf kleine Bildschirmbreite:

aber sobald ich die Breite meines Bildschirms vergrößern, sie sehen wirklich gestreckt aus. Aber ich brauche sie aus jeder Perspektive.

ich vielleicht bin nicht sicher, es gibt eine Möglichkeit, dass ihre auf unterschiedlichen Bildschirmgrößen Anzeige fixiert. Vielleicht hätte ich einige Medienanfragen verwenden können. Wie geht man damit um?

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

Sie haben die width und height des Kreises auf den gleichen Wert zu setzen:

.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>