在网络播放器上将 Lottie 设置为 "cover"

Question

我正在尝试创建一个使用 lottie 的背景动画，它的行为类似于设置为“覆盖”的图像 - 即它会在调整页面大小时裁剪图像，使其保持 100% 的高度观点。

https://codepen.io/michaelzero00/pen/KKXJjOg

我预计

preserveAspectRatio="xMinYMin slice"

为我做这个，但它仍在调整大小以保持纵横比。

Answer 1

以下CSS 可能会有帮助。 “lottie”将占据屏幕的整个宽度和高度，z-index 设置为 -1 使其位于其他元素之后。

lottie-player {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  z-index: -1;
}