0
188
ViewsRedimensionar proporcionalmente la LISTA dinámica de imágenes según la cantidad de imágenes en la lista
Tengo un par de contenedores agregados dinámicamente a otro contenedor (llamemos a esos elementos Soluciones de carga). Dentro de cada solución de carga, me gustaría agregar tantos íconos de camiones como la solución de carga tenga en su configuración.
Así por ejemplo:
- la solución 1 tiene solo 1 carga, por lo que solo debe mostrar 1 camión.
- la solución 2 tiene 5 cargas y debería mostrar 5 camiones.
- la solución 3 tiene 20 cargas y debería mostrar 20 camiones.
Ahora el problema es que eventualmente, todos esos íconos de camiones ya no caben en el contenedor.
¿Cómo podría cambiar automáticamente el tamaño de las imágenes dentro de cada contenedor de Loading Solution mientras las sigo generando dinámicamente?
Esto es lo que parece en este momento: 
Pero esto es lo que quiero lograr: 
Editar: esta es mi plantilla de Vue para los íconos de camiones
<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
Solución pura de HTML y 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>Si desea cambiar el número máximo de columnas por fila (el real es 5), ajuste el porcentaje de base flexible de la clase de elemento, el ancho máximo del nth-child y su argumento (n + (cols + 1) ).