根据列表中图像的数量按比例调整动态图像列表的大小答案

【问题标题】：Proportionally resize dynamic LIST of images based on amount of images in list根据列表中图像的数量按比例调整动态图像列表的大小
【发布时间】：2021-12-24 04:19:16
【问题描述】：

我有几个动态添加的容器到另一个容器（我们称这些项目为加载解决方案）。在每个装载解决方案中，我想添加与装载解决方案在其配置中一样多的卡车图标。

所以，例如：

解决方案 1 只有 1 个装载，因此它应该只显示 1 辆卡车。
解决方案 2 有 5 个装载，应该显示 5 辆卡车。
解决方案 3 有 20 个装载，应显示 20 辆卡车。

现在的问题是，所有这些卡车图标最终都不再适合容器了。

如何自动调整每个加载解决方案容器内的图像大小，同时仍然动态生成它们？

这就是现在的样子：

但这就是我想要实现的目标：

编辑：这是我的卡车图标的 Vue 模板

<div class="trucks">
    <div class="truck-img d-inline-block mr-4" v-for="i in item.loads" :key="`load-${i}`">
        <img src="@/__app_assets/img/truck.png" alt="truck" />
    </div>
</div>

【问题讨论】：

标签： javascript html css vue.js sass

【解决方案1】：

纯 HTML 和 CSS 解决方案：

.container {
  background: gray;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
}

.inside {
  display: flex;
  flex-flow: wrap;
}

.item {
  margin: 4px;
  flex: 1 0 16%;
}

.item:nth-child(n + 6){
  max-width: 52px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="inside">
    <div class="item">
      <img src="https://i.imgur.com/Jf1Pzoo.jpg"/>
    </div>
    <div class="item">
      <img src="https://i.imgur.com/Jf1Pzoo.jpg"/>
    </div>
    <div class="item">
      <img src="https://i.imgur.com/Jf1Pzoo.jpg"/>
    </div>
  </div>
</div>

如果你想改变每行的最大列数（实际是5），调整item类的flex-basis百分比，第n个孩子的最大宽度和它的参数（n + (cols + 1))。

【讨论】：