Sagt mal, geht das inzwischen und wenn ja wie?
Also ein Quadrat, das seine Größe an den Bildschirm anpasst. Bisher hatte ich einfach DIVs mit einer festen Breite und Höhe. Das soll sich nun eigentlich ändern. Die Breite ist da kein Problem, nur wie bekomme ich denn die Höhe dazu, dass diese immer den gleichen Wert hat wie die Breite? 
OHNE Javascript, denn das sind sehr viele Quadrate 
Also eigentlich so was da:
width: calc(100% / 7);
height = width;
Einer eine Idee?
Eigentlich ganz einfach mit object-fit:
https://beispiel.rocks/jsfiddle.net/14nzc5md/
Wenn du einfach nur ein hintergrundbild im quadrat haben willst, dann geht das auch ueber css background-image und diverse eigenschaften womit du skalierung und position einstellst.
Wenn du fliesstext, formulare oder andere inhalte unbestimmter groesse im quadrat haben willst, dann musst du diesen aber zusaetzlich in einem anderen div platzieren und dass dann irgendwie mit overflow loesen der den text abschneidet, sobald er zu gross/lang fuer dein quadrat wird.
Deine loesung oben funktioniert nicht, da du ja nur die ideal- und min/max groessen der elemente angibst, aber nirgendwo das seitenverhaeltniss definierst.
Man, ich wollte Dir doch auch noch 'nen Link schicken ...
https://beispiel.rocks/beispiel.rocks…sive-square.htm
Danke euch beiden. Ich war allerdings nun schon einen Schritt weiter. Das CSS oben von mir funktioniert, auch mit min-height bzw. max. Was ich nicht wusste ist, dass es eben mit "display:table-cell" nicht geht. Bei normalen Tabellen wusste ich das, aber per CSS war mir das neu.
object-fit ist für mein Vorhaben aktuell keine Lösung, da ich quasi kein Objekt habe Daher fragte ich einfach auch nur nach "Quadratisches DIV", ohne da näher drauf einzugehen.
Mein Vorhaben oder Ziel bzw. erst mal der Ausgangspunkt. Es geht um Kalender. Diese baue ich aktuell noch klassisch per Tabelle. Manche Zellen brauchen einen zweifarbigen Hintergrund und das auch verformt, also quasi zwei Dreiecke mit einer Linie dazwischen. Genau dafür habe ich aktuell Bilder. Hier würde aber object-fit auch nicht gehen, denn es sind keine Einzelbilder, sondern Sprites.
So, wo wollte oder will ich hin. Primär erst mal die Bilder weg, denn die behindern mich in der Entwicklung. Aktuell sind die Zellen ja fix, aber wenn nun einer kommt und keine 20x20 will, sondern 25x25 etc, dann muss ich jedes mal neue Sprites erstellen und das dann teils auch noch in anderen Farben. Also die Bilder sollen weg. Das habe ich nun auch an sich schon geschafft mit CSS3 und "Transform".
So, und das andere eben, dass die Zellen sich dynamisch anpassen sollen, an den Bereich, wo sie eingebunden sind, aber nur bis zu einem gewissen Maß, sonst sind sie zu groß oder zu klein. Die Schrift darin genauso. Bisher erfolgt die Vorgabe ja per Default aus dem Kundenbereich und ist dann so, egal ob großer oder kleiner Schirm. Das soll auch weg. Mit Tabellen geht das ja in Sachen Breite problemlos, die passen sich alle an, wenn man sie lässt, aber die Höhe eben nicht und da kollidiert es dann mit den Hintergrundgrafiken, egal ob die nun CSS oder Bilder sind. Wenn die Dinger nicht mehr quadratisch sind, dann ist ein transform -135 Grad eben nicht mehr von Ecke zu Ecke, sondern irgendwo mitten drin. Das darf nicht sein, also muss es eben ein Quadrat bleiben.
Dann kommt noch dazu, dass Hintergrundfarben und Hintergrundbilder normalerweise nicht ausgedruckt werden. Das wollen aber immer mehr haben. Klar geht das, aber bring das mal einem 60-jährigen am Tel bei, wie er seine Druckereinstellungen ändern soll
Man merkt also, das sind mehrere Anforderungen, die ich habe und für mich heißt das: Alles neu machen. Ich scheiterte nur schon am doofen Quadrat.
