I have a fixed-size container which will have items added and removed to it, so i'd like the items to resize to be as large as possible(equally, and maintaining aspect ratio) to fill as much of the container as possible but without overflowing the container.
I found this solution which seems to be great for organizing the items by rows and columns optimally but it's based on fixed-size items. I basically want this which will also scale height-width to fill the container as much as it can and stop at/before overflowing. Create a CSS Grid that flows by column, with dynamic columns and rows based on content
#container {
border:3px solid orange;
width:250px;
height:250px;
}
#grid {
border: 1px solid red;
column-width: 50px;
column-gap: 0px;
}
#grid > div {
break-inside: avoid-column; /* Prevent element from breaking */
page-break-inside: avoid; /* Prevent element from breaking in Firefox */
background: gray;
border:1px solid blue;
}
<div id="container">
<div id="grid">
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
<div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
</div>
</div>
I started this fiddle to give some more context. basically my items will end up being divs with a background image(the reason aspect ratio is important) and i'll position some text over the image.
