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

user_12903249 0
Viewed 101

I have a couple of dynamically added containers to another container (let's call those items Loading solutions). Inside every Loading Solution, I would like to add as many truck icons as the Loading Solution has in its configuration.

So, for example:

  • solution 1 has only 1 loading, so it should only display 1 truck.
  • solution 2 has 5 loadings and should display 5 trucks.
  • solution 3 has 20 loadings and should display 20 trucks.

Now the problem is that eventually, all those truck icons do not fit in the container anymore.

How could I automatically resize the images inside every Loading Solution container while still generating them dynamically?

This is what it looks like right now: enter image description here

But this is what I want to achieve: enter image description here

Edit: This is my Vue template for the truck icons

<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>
vue.js sass css html javascript
1 Answers

Pure HTML and CSS solution:

.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>

If you want to change the number of max columns per row (the actual is 5), adjust the flex-basis percentage of the item class, the max-width of the nth-child and its argument (n + (cols + 1)).

user_132327960
Related