0
152
ViewsProportionally resize dynamic LIST of images based on amount of images in list
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:
But this is what I want to achieve:
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>
1 answers
Answer question0
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)).