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

Posted 2023-02-22

【中文标题】根据列表中图像的数量按比例调整动态图像列表的大小

【英文标题】：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"  />
    </div>
</div>

【参考方案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))。