將圖像適合 CSS animation 的父級

Question

我一直在嘗試為 a.jpeg 圖像設置動畫，使其看起來像一個無限循環的移動橫幅。 它有效，但是，我不喜歡它的分辨率。 所以我把它放大了。 但現在它搞砸了整個。 如果不破壞 animation 的流程，我無法將圖像縮小到橫幅中。 它適用於我制作的較小尺寸的橫幅（平滑循環和適合），但不適用於更大的橫幅

鏈接到實際頁面：點我密碼：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%); }

animation 的工作方式如下：

它會滑過，直到看起來回到起點（2/3 或 66.6%），然后立即重新啟動。

誰能幫我指出正確的方向？

感謝您的任何幫助

Answer 1

圖像在與其比例不匹配的 div 中呈現，因此它覆蓋了您在 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 中設置的內容。

也許您可以通過考慮寬度來使用 js 或 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 動態設置高度，但我想在大屏幕上不會那么令人賞心悅目。

您可以復制這些圖像中的 2 或 3 個並應用 object 適合包含並讓它們一個接一個滾動。

至於您的 animation，如果您不希望它停止 66%，那么您應該從 animation translateX(-66.6%) 中刪除它