BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
- Desde
- 13 Jun 2020
- Mensajes
- 29.182
Para que las imágenes se acomoden una al lado de la otra al reducirse el ancho del contenedor
ifvcent, se pueden usar propiedades CSS para que los elementos internos cambien su posición y tamaño, como por ejemplo el uso de la propiedad display con el valor inline-block en el selector .ifv:
CSS:
#ifvcent {
display: flex;
flex-wrap: wrap;
}
.ifv {
display: inline-block;
width: calc(33.33% - 20px);
margin: 10px;
text-align: center;
}Esto permitirá que los elementos internos
.ifv se muestren en línea y tengan un ancho igual al 33.33% del contenedor, es decir, tres elementos por fila. Además, para evitar que las imágenes se vean aplastadas o alargadas al cambiar su tamaño según el ancho del contenedor, se puede usar el valor
max-width: 100%; en el selector .ifv img, que asegurará que las imágenes no excedan el 100% del ancho disponible.
CSS:
.ifv img {
max-width: 100%;
height: auto;
}Con estos cambios, las imágenes se acomodarán una al lado de la otra y se ajustarán de manera proporcional al ancho disponible del contenedor
ifvcent. Espero que esta solución te haya sido de ayuda.
