Object-Fit: Cover for Lottie Animation?

Hi -

Does anyone have any advice on how to achieve the object-fit: cover equivalent for a lottie animation? I’m trying to fill my div vertically and let the width bleed off the edges as the browser gets resized. This is easy with an image but I if I understand it correctly the object-fit property only applies to images and video and hence has no effect on my lottie animation.

In my little test project you can see an image with the behavior I am looking for, followed by a lottie animation that I’d like to have the same behavior. Both the parent divs and the elements themselves have identical CSS, except for the background color.

Thanks for any help and please pardon me if I am overlooking something obvious. I am new to webflow and my CSS is rusty at best.


Designer Preview: https://preview.webflow.com/preview/lottie-cover-test?utm_medium=preview_link&utm_source=designer&utm_content=lottie-cover-test&preview=d9d70d1ede9c341882338333434bdc50&mode=preview

Published Site: https://lottie-cover-test.webflow.io/

2 Likes

Hiya @timt did you manage to resolve this; I’m having the same problem?