如何在 React 中动态更改 Lottie 的宽度和高度？

Question

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

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

Answer 2

Try to add only to your media query:

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

}

Answer 3

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