如何在 React 中動態更改 Lottie 的寬度和高度？

Question

我正在開發一個在 Django 和 React 中構建的 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 的方式。

以下是如何將 class / id 分配給生成的 svg 元素（根據此）：

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

然后你可以在你的 CSS 中操縱它的大小，通過使用媒體查詢或使用 vw/vh。

您需要添加!important標簽以覆蓋 svg 的樣式屬性：

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

Answer 2

嘗試only添加到您的媒體查詢：

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

}

Answer 3

您也可以嘗試使用 vw 和 vh 或百分比而不是 px。 我通常傾向於使用它們來提高響應能力。