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%？

Answer 2

建议您使用transform属性，而不要使用绝对定位。
这样您的动画就会在合成层中播放。

然后您的代码可以像这样简化：

#homepage-banner {
  position: relative;
  width: 100%;
  height: 82vh;
  overflow: hidden;
}

.homepage-slider img {
  width: 20%; 
  cursor: pointer;
}

.homepage-slider {
  display:flex;
  width: 500%;
  animation: 24s slider infinite;
}

.homepage-slider:hover {
  animation-play-state: paused;
}

@keyframes slider {
  0%,
  {
    transform: translateX(0)
  }
  23% {
    transform: translateX(0)
  }
  25% {
    transform: translateX(-20%)
  }
  48% {
    transform: translateX(-20%)
  }
  50% {
    transform: translateX(-40%)
  }
  73% {
    transform: translateX(-40%)
  }
  75% {
    transform: translateX(-60%)
  }
  98% {
    transform: translateX(-60%)
  }
  100% {
    transform: translateX(-80%)
  }
}

<section id="homepage-banner">

  <div class="homepage-slider">
    <img class="freezeslideshow" id="slideImageOne" src="https://picsum.photos/800/200?1" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageTwo" src="https://picsum.photos/800/200?2" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageThree" src="https://picsum.photos/800/200?3" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageFour" src="https://picsum.photos/800/200?4" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageFive" src="https://picsum.photos/800/200?5" alt="Protein Deals" />
  </div>

</section>

Answer 3

将change添加到width: 20%;应该可以解决您的问题。目前，没有什么可以告诉您图像的大小。或者，您可以将该容器设置为.homepage-slider img并提供图像display: flex;。如果您更改轮播中的图片数量，那将少更新一行。

Answer 4

我的猜测是，这是由于您使用vh和em之类的相对单位进行大小调整。一般来说，这是个好主意，但是在不同的浏览器和不同的屏幕尺寸下，它们并不一致。

vh单位实际上是“浏览高度”的百分比，“浏览高度”是网站的可见尺寸。因此，82vh表示可见屏幕尺寸的82%，因此，如果您要垂直调整窗口的大小，则此框也会更改尺寸，以便可以保持该百分比的尺寸。这意味着如果某人有一个浏览器工具栏显示可更改网站的可见大小，则此框的大小将有所不同。

如果您希望它们在浏览器中的大小完全相同，请改用像素。

（PS：我在锻炼前使用MP突击，太棒了！：P）

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

4 个答案: