[英]Fit Image into parent of a CSS animation
I've been trying to animate a.jpeg image to look like an infinite looping moving banner.我一直在尝试为 a.jpeg 图像设置动画,使其看起来像一个无限循环的移动横幅。 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.
如果不破坏 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)链接到实际页面:点我密码:siesoh(就在登陆页面下方)
/*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: animation 的工作方式如下:
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.它会滑过,直到看起来回到起点(2/3 或 66.6%),然后立即重新启动。
Could anyone help point me into the right direction?谁能帮我指出正确的方向?
Thank you for any help感谢您的任何帮助
The image is rendered in a div that doesn't match its ratio, so it covers as you've set it in the css.图像在与其比例不匹配的 div 中呈现,因此它覆盖了您在 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 中设置的内容。
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.也许您可以通过考虑宽度来使用 js 或 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 动态设置高度,但我想在大屏幕上不会那么令人赏心悦目。
You can copy 2 or 3 of these images and apply object fit contain and let them scroll one after another.您可以复制这些图像中的 2 或 3 个并应用 object 适合包含并让它们一个接一个滚动。
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%)至于您的 animation,如果您不希望它停止 66%,那么您应该从 animation translateX(-66.6%) 中删除它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.