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

Question

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

因此，例如：

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

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

如何在动态生成图像的同时自动调整每个 Loading Solution 容器内图像的大小？

这是现在的样子：

但这就是我想要实现的：

编辑：这是我的卡车图标 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>

Answer 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），请调整项目 class 的 flex-basis 百分比，max-width nth-child 及其参数 (n + (cols + 1)).

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

Proportionally resize dynamic LIST of images based on amount of images in list

html

javascript

css

sass

vue.js