如何自动调整固定容器中的图像数组的大小，而不会溢出，不会滚动，没有媒体查询？

Question

我从API接收到一系列方形图像，以便在React应用中显示。图片数量在1到14之间变化。我从API收到的图片尺寸为200像素，512像素或600像素正方形。显示的图像具有对应的头奖面额和头奖金额显示在图像下方，以及在它们上方的标题。显示屏可以显示1-5种面额和相应的数量，所有这些都必须具有相同的大小-不能缩小这些面额。

我的应用程序将在1920H x 1080W屏幕上的某个营业地点显示，并且无法滚动。将无法调整屏幕大小，因此不会进行媒体查询。

显示器将每十秒钟旋转一次，因此将显示一组新图像。我已将一个链接附加到CodeSandbox链接https://codesandbox.io/s/jackpot-ufs5t，该链接具有我的应用程序的粗略副本（无旋转，无API调用），并且在imageList.js文件中具有基本的模拟数据，充当伪造的API。

我想将图像放入屏幕顶部附近，标题下方和头奖面额/金额上方的容器中。如果有少量图像（6张或更少），我希望它们具有一定的高度和宽度（303像素见方看起来不错）。如果图像多于6张，我希望高度和宽度按比例减小，以便它们都适合在标题和头奖金额之间的容器内。

[只有几张图片和1-3个大奖的面额，一切看起来都很漂亮。但是，最坏的情况-14张图片和5种头奖面额-是一场灾难。

启用了flex-wrap的Flexbox似乎可以很好地自动调整图像，并在容器尺寸缩小的情况下缩小图像。但这不是事实，存在的图像越多，它们就会重叠它们上方或下方的图像。

我在所附的CodeSandbox示例中使用了CSS-Grid，但我也无法使用。

使用CodeSandbox中的imageList文件，注释和取消注释数据将改变显示的图像数量和累积奖金数量。

我要做的就是使其工作（在CodeSandbox中未显示）是根据图像数组和累积奖金数组的长度的每种不同组合，有条件地为图像和容器分配不同的类。但是我觉得必须有一种更好的方法，使用Flexbox或CSS-Grid仅根据有多少个图像来自动缩小方形图像的大小。我错了吗？

我目前仅担心垂直显示（人像），而不担心水平（风景）图。

CodeSandbox再次链接：https://codesandbox.io/s/jackpot-ufs5t

Answer 1

[您可以做的是，在container-logos类中定义一个网格，并让徽标具有css网格创建的虚拟空间的宽度和高度的100％。

因此，基本上，您需要做的是：

• 将grid-template-rows: repeat(auto-fit, minmax(79px, 1fr));添加到已经存在的.container-logos类中。
• 删除您在.logo类中的所有内容并添加height: 100%; width: 100%;。

这里也是我所描述的快速示例：

body{
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    height: 100vh;
    display: grid;
    place-items: center;
}

.container-logos{
  max-height: 50vh;
  max-width: 50vw;
  width:50vw;
  height:50vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(45px, 1fr));
  grid-gap: 10px;
}

.logo{
  width: 100%;
  height: 100%;
  background-color: red;
}

<div class="container-logos">

  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>

</div>

您也可以尝试从我的示例中删除/添加一些“徽标”，以根据可用空间观看它们的放大/缩小尺寸。

此外，这是我如何通过上述解释来获取您的示例的简要说明：