我有一个固定大小的容器，其中将添加和删除项目，所以我希望将项目调整为尽可能大（同样，并保持纵横比）以尽可能多地填充容器但是不会溢出容器。
我发现这个解决方案似乎非常适合以最佳方式按行和列组织项目，但它基于固定大小的项目。我基本上想要这个，它也将缩放高度宽度以尽可能多地填充容器并在溢出时/之前停止。 创建一个按列流动的 CSS 网格，具有基于内容的动态列和行
#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>
我开始这个小提琴是为了提供更多的背景信息。基本上我的项目最终将成为带有背景图像的 div（原因纵横比很重要），我将在图像上放置一些文本。