Mach ein quadratisch, wenn sich die Breite basierend auf dem Prozentsatz dynamisch ändert [duplicate]

Ich arbeite an einer Webanwendung, die ein NxN-Raster basierend auf der Auswahl von N durch den Benutzer generiert. Ich möchte, dass die Gesamtbreite des Rasters relativ ist (dh 100 % des verfügbaren Platzes), damit Benutzer auf verschiedenen Papierformaten drucken können .

Ich kann die Breite der Quadrate im Raster leicht in % berechnen (dh: 100% / N), aber ich habe Probleme bei der Berechnung der Höhe. Die Höhe einer Webseite wird immer unendlich sein, es sei denn, ich begrenze sie künstlich, was ich, wie gesagt, nicht möchte.

Wie kann ich machen die Quadrate in meinem Raster sind quadratisch im Vergleich zu rechteckig, wenn die Höhen- und Breitenbeschränkungen meines Rasters dynamisch und nicht quadratisch sind?

Es gibt 2 Haupttechniken, um das Seitenverhältnis eines responsiven Elements beizubehalten, indem Polsterung und vw-Einheiten verwendet werden:
(Für eine vollständige Lösung für ein reaktionsfähiges Gitter aus Quadraten können Sie diese Antwort sehen.)

Verwendung von vw-Geräten

Sie können verwenden vw Einheiten, um Ihre Elemente quadratisch und reaktionsschnell zu machen (Viewport-Einheiten auf MDN).
1vw = 1% of viewport width So können Sie die Höhe der Elemente entsprechend einstellen Breite des Ansichtsfensters (oder Höhe mit vh Einheiten).
Beispiel mit einem 4×4-Raster:

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Das gleiche Verhalten kann erreicht werden, indem das Element entsprechend der Viewport-Höhe usin skaliert wird vh Einheiten.

Polsterung verwenden

Die Polsterung wird entsprechend der Breite des Containers berechnet, sodass Sie damit die Höhe des Blocks entsprechend seiner Breite festlegen können.
Beispiel mit einem 4×4-Raster:

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Mit CSS ist es ziemlich einfach, ein Div in ein Quadrat zu verwandeln. Sie legen eine Breite fest, sagen wir 50 %. Dann fügen Sie einen padding-bottom mit dem gleichen Wert hinzu:

div {
width: 50%;
padding-bottom: 50%;
}

und es bleibt quadratisch, wenn Sie die Größe des Fensters ändern.

.

.

Sie können dies mit einem beliebigen Seitenverhältnis tun, wenn Sie möchten, dass die Box 16: 9 ist, berechnen Sie:

9/16 = 0,56

die du dann mit der Breite deines Elements multiplizierst (in diesem Fall 50 % (= 0,5)), also:

9/16*0,5= 0,28 = 28 %

Dies ist ungetestet, ich weiß nicht, wie man das nur in CSS macht, ich würde jQuery verwenden.

$('div').height($('div').width());