Estoy trabajando en una aplicación web creada en Django y React, tengo una pregunta sobre cómo cambiar el ancho y el alto de mi imagen de Lottie cuando la pantalla cambia de tamaño. Esa es mi configuración de Lottie:
const defaultOptions = { loop: true, autoplay: true, animationData: animation, rendererSettings: { preserveAspectRatio: "xMidYMid slice" } } <div id='lottie-container'> <Lottie id='lottie-icon' options={defaultOptions} /> </div>Esa es la consulta de medios CSS:
/*------| Desktop | -------*/ @media screen and (min-width:991px) { /* LOTTIE */ #lottie-icon{ width: 400px; height: 400px; } } /*-----| Mobile | ------*/ @media screen and (max-width:991px) { /* LOTTIE */ #lottie-icon{ width: 200px; height: 200px; } }Su problema aquí parece ser la forma en que asigna una identificación a su componente Lottie.
Así es como puede asignar una clase/id a su elemento svg generado (según esto ):
const defaultOptions = { loop: true, autoplay: true, animationData: animation, rendererSettings: { preserveAspectRatio: "xMidYMid slice", className: "lottie-svg-class", id: "lottie-svg-id" } }Luego, puede manipular su tamaño en su CSS, ya sea mediante consultas de medios o usando vw / vh.
Sin embargo, deberá agregar etiquetas !important para anular las propiedades de estilo del svg:
.lottie-svg-class{ width:calc(max(500px, 40vw))!important; }Intente agregar only a su consulta de medios:
@media only screen and (max-width: 600px) { }también puede intentar usar vw y vh o porcentaje en lugar de px. Por lo general, tiendo a usarlos para la capacidad de respuesta.