How can I change dynamically the Width and Height to my Lottie in React?-CodePudding

I'm working on a web app builded in Django and React, I've a question about to change the width and height of my Lottie img when the screen change Its size. That's my Lottie configuration:

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animation,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  }

   <div id='lottie-container'>      
        <Lottie
        id='lottie-icon'
        options={defaultOptions}
        />
   </div>

That's CSS media query:

/*------|
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;
    }
}

CodePudding user response：

Try to add only to your media query:

@media only screen and (max-width: 600px) {

}

CodePudding user response：

you can also try to use vw and vh or percentage instead of px. I usually tend to use them for responsiveness.