React中的Lottie Anim的动态变化宽度和高度

Question

我正在使用Django构建的Web应用程序，并进行了反应，当屏幕更改尺寸时，我的问题要改变Lottie IMG的宽度和高度。 那是我的Lottie配置：

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

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

那就是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;
    }
}

Answer 1

您的问题似乎是您为Lottie组件分配ID的方式。

这是您可以将类/ID分配给生成的SVG元素的方法（根据此）：

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

然后，您可以使用媒体查询或使用大众 / VH来操纵CSS中的大小。

您将需要添加！重要的标签，尽管为了覆盖SVG的样式属性：

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

Answer 2

尝试将仅添加到您的媒体查询：

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

}

Answer 3

您也可以尝试使用大众和VH或百分比而不是PX。我通常倾向于将它们用于响应能力。

Answer 4

只需将高度和宽度提供给lottie-container lottie图标将占据容器的高度和宽度即可。

/*------|
Desktop |
-------*/

@media screen and (min-width:991px) {
    #lottie-container{
        width: 400px;
        height: 400px;
    }
}

/*-----|
Mobile |
------*/

@media screen and (max-width:991px) {
    #lottie-container{
        width: 200px;
        height: 200px;
    }
}