Fit Image into parent of a CSS animation

Question

I've been trying to animate a.jpeg image to look like an infinite looping moving banner. and it works, However, I didn't like the resolution of it. so I scaled it up. But now it messes up the whole. I can't get the image to scale down into the banner without it breaking the flow of the animation. It works perfectly well with the smaller sized banner I've made ( smooth loop and fits) but not with anything bigger

Link to the actual page: Click me Password: siesoh (just below the landing page)

 /*Banner animation*/.promo-grid__bg { height: 100px; }.promo-grid__container.vertical-center.horizontal-center { position: relative; overflow: hidden; }.promo-grid__bg { position: absolute; left: 0; top: 0; width: 300%; height: auto; animation: slideshow 20s linear infinite; transform: translate3d(0, 0, 0); } @keyframes slideshow { 100% { -webkit-transform: translateX(-66.6%); }

The animation works by having a banner as such:

And it will slide by until it looks like it is back at the starting point (2/3 or 66.6%) and then restart right away.

Could anyone help point me into the right direction?

Thank you for any help

Answer 1

The image is rendered in a div that doesn't match its ratio, so it covers as you've set it in the css.

Maybe you could set the height dynamically with js or css by taking the width into account, but I guess that not be so eye pleasing in a large screen.

You can copy 2 or 3 of these images and apply object fit contain and let them scroll one after another.

As for your animation if you don't want it to stop by 66% then you should be removing this from the animation translateX(-66.6%)