如何让Lottie动画自适应填满Flex容器的宽高？

解决这个问题需要同时调整Lottie动画配置和容器CSS，核心是让动画明确继承容器尺寸，并设置合适的缩放规则：

1. 修改JS动画配置 #

在bodymovin.loadAnimation参数中添加width、height和preserveAspectRatio配置，强制动画适配容器：

let lottieAnim = bodymovin.loadAnimation({
  container: document.querySelector(".lottiecontainer"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/js/tAjGxx4stF.json",
  background: "transparent",
  width: '100%', // 让动画宽度占满容器
  height: '100%', // 让动画高度占满容器
  // 根据需求选择缩放规则：
  // * 'xMidYMid slice'：保持原比例，裁剪超出部分填满容器（推荐）
  // * 'none'：完全拉伸适配容器，不保持比例
  // * 'xMidYMid meet'：保持原比例，留白适配容器
  preserveAspectRatio: 'xMidYMid slice'
});

2. 设置容器CSS #

给.lottiecontainer明确设置宽高（确保容器有可参考的尺寸，否则100%比例会失效）：

.lottiecontainer {
  width: 100%; /* 例如占满父元素宽度 */
  height: 100%; /* 占满父元素高度，需确保父元素已有高度设置 */
  /* 如果要全屏展示，可替换为： */
  /* width: 100vw; */
  /* height: 100vh; */
}

关键原因说明 #

Lottie默认会沿用动画源文件的512x512固定尺寸，仅修改容器CSS无法覆盖这个默认行为。必须在动画配置中明确指定width/height为100%，同时通过preserveAspectRatio控制SVG的缩放逻辑，才能让矢量动画真正适配容器大小。

内容的提问来源于stack exchange，提问作者Jiyorude