html - 为什么 Chrome 和 IE 显示的横幅尺寸与 Firefox 不同？

Question

我已经完成了一个网站(设计时使用 Firefox 作为默认浏览器)，但是在不同的浏览器中进行测试时，我发现网站的滑动横幅部分在 Chrome 或 IE 中显示不正确。

不仅如此，我用来滑动图像的关键帧导致一半的图像被移出屏幕。虽然我认为这可能更多地与幻灯片容器的实际尺寸调整有关？

这是我的代码，适用于横幅部分:

#homepage-banner {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 82vh;
    overflow: hidden;
}

.homepage-slider img {
    display: inline-block;
    cursor: pointer;
}

.homepage-slider {
    top: 3.5em;
    width: 500%;
    position: absolute;
    display: flex;
    animation: 24s slider infinite;
}

.homepage-slider:hover {
    animation-play-state: paused;
}

@keyframes slider {
    0%, {
        left: 0%;
    }

    23% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    48% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    73% {
        left: -200%
    }

    75% {
        left: -300%;
    }

    98% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

<section id="homepage-banner">

    <div class="homepage-slider">
        <img class="freezeslideshow" id="slideImageOne" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageTwo" src="images/hero-banner/plant-protein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageThree" src="images/hero-banner/image5.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFour" src="images/hero-banner/imaged3.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFive" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
    </div>

</section>

第一个屏幕截图显示的是 Firefox 显示的内容，第二个屏幕截图显示的是 Chrome 和 IE 显示的内容。

我通常如何处理这些前缀？我什至通过认为它与前缀有关来做出正确的假设吗？

Answer 1

您能否尝试将以下 CSS 添加到您的 img 中:max-width: 100%？