Ok, komme eher aus der Javascript-Ecke und habe nun das Vergnügen, das UX-Design zu gestalten. Stellt sich heraus, dass ich dafür offensichtlich ein viel zu großer Vollidiot bin. Ich versuche jetzt seit Stunden ein GRID hinzubekommen, dessen Inhalte in einer prozentual definierten Größe zentriert dargestellt werden. Letzter Entwurf dazu:
#grid-container {
position: relative;
display: grid;
grid-template-columns: auto auto;
background-color: orange; /* nur damit ich besser sehe, was der Container so treibt */
width: 60vw;
height: 60vh;
justify-content: center;
align-content: center;
}
.sizing-to-container {
position: relative;
background-color: blue; /* wieder nur damit ich besser sehe, was das Element so treibt */
max-width: 40%;
/* Warum %? -- Width soll sich anpassen, wenn sich Width des Containers ändert */
max-height: 70%;
/* Warum %? -- Height soll sich anpassen, wenn sich Height des Containers ändert */
}
img {
object-fit: fill;
max-width: 100%;
max-height: 100%;
}
HTML dazu:
<div id="grid-container">
<div class="sizing-to-container"><img src="./Testbild.svg" alt="" /></div>
<div class="sizing-to-container"><img src="./Testbild.svg" alt="" /></div>
</div>
Zum besseren Verständnis das ganze nochmals auf UNSEE zum Mitleiden: https://unsee.cc/d6b71cf8/
...das ist das Resultat, welches ich anstrebe.
Derzeit werden die Container Children überhaupt nicht dargestellt, ich bekomme lediglich einen orangen Container.
ARGH
...und danke für Ideen.