Wie bleibt man bei responsivem Design proportional?

Question

Code bei jsfiddle

Ich habe ein paar Kreise innerhalb eines Container-Divs. Ich verwende Prozentangaben, da ich möchte, dass die Kreise responsiv bleiben und sich je nach Bildschirmgröße vergrößern. Ich möchte auch, dass diese Kreise Kreise bleiben und nicht zu Ovalen werden, wie es derzeit geschieht, wenn ich das Fenster verkleinere. Dies liegt offensichtlich daran, dass die Breiten und Höhen der Bildschirme selten gleich sind und da ich Prozenthöhen und -breiten wähle, ist genau das, was ich bekommen sollte.

Wie kann ich jedoch responsive Kreise erhalten, die auf verschiedenen Bildschirmgrößen Kreise bleiben?

.circle {
    margin: 5%;
    display: inline-block;
    width: 30%;
    height: 30%;
    background: #000;
    border-radius: 50%;
    position: relative;
}

Answer 1

Ihr Fiddle für eine Lösung ohne JavaScript aktualisiert - http://jsfiddle.net/D6pjd/23/

Grundsätzlich habe ich das HTML wie folgt geändert (nur einen Teil dargestellt) -

...
...

Und Änderungen im CSS -

.circle-container {
    margin: 20px;
    display: inline-block;
    position: relative;
    width: 30%;    
}

.dummy {
    padding-top: 100%; 
}

.circle {
    margin: 5%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: #000;
    border-radius: 50%;
}

Basierend auf diesem - Höhe gleich dynamischer Breite (CSS-fluides Layout)

BEARBEITEN: Das Fiddle wurde aktualisiert, um nur zwei Kreise in einer Reihe zu behalten

Answer 2

Antwort basierend auf diesem Beitrag

Sie müssen für jeden Kreis einen Container mit einem Seitenverhältnis von 1:1 erstellen. Dank an Nathan Ryan, der eine CSS-Lösung dafür vorgeschlagen hat. Er gibt eine Lösung für ein Seitenverhältnis von 4:3, aber für Ihr Problem benötigen Sie ein Seitenverhältnis von 1:1. Deshalb müssen Sie margin-top:75%; in margin-top:100%; für Ihren Container .circle ändern

Fiddle

HTML :

CSS :

html, body {
    background: pink;
    font-family: 'Helvetica Neue', sans-serif;
    font-size:100%;
}
.circle_container{
    float:left;
    position: relative;
    width: 30%;
    margin:10%;
}
.circle {
    margin-top: 100%
}

.circle1, .circle2,.circle3,.circle4,.circle5,.circle6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-radius: 50%;
}

Wenn Sie Ihren Container auf float:left; statt auf display:inline-block setzen, vermeiden Sie die "Leerstellen" zwischen Ihren Kreisen und haben vollständige Kontrolle über die Breite und Ränder Ihrer Kreise.