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

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;
    }
}
javascripthtmlcssreactjslottie


Solution 1:[1]

Your issue here seems to be the way you assign an id to your Lottie component.

Here is how you can assign a class / id to your generated svg element (according to this):

const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animation,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
      className: "lottie-svg-class",
      id: "lottie-svg-id"
    }
  }

Then you can manipulate its size in your CSS, either by using media queries or using vw / vh.

You will need to add !important tags though in order to override the style properties of the svg:

.lottie-svg-class{
    width:calc(max(500px, 40vw))!important;
}

Solution 2:[2]

Try to add only to your media query:

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

}

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Azakira
Solution 2 yanir midler
Solution 3 Maddy

Related Questions