css/Html 中的图像滑块

Question

我创建了一个带有图像滑块的网站。但是我所有的图片都是不同大小的，所以当图片改变时，页面也会滚动...... 请帮我解决这个问题。我正在为演示提供 link。 Click here for Demo为了更好地一次访问，请减小浏览器的大小。

Answer 1

您可以添加

.mySlides {
    height: 1000px;
    overflow: hidden;
}

添加到您的样式表，但请注意，如果图片高于 1000 像素，这将裁剪您的图片，如果图片较短，则会在下方留下空白。您可以使用任何值代替 1000px.

尽管如此，这是一个糟糕的解决方法。最好的方法是将所有图像调整为相同的高度。

Answer 2

要解决您的问题，需要使用一致大小的图像 - 这将解决高度问题。只需创建 5 张 1000 像素 x 500 像素的图像，并将它们用于所有幻灯片。如果你想每张图片都有不同的尺寸，你需要 "white border" 或不同的高度。

Answer 3

你不能有不同的高度元素，除了你想要的。至少在一个步骤中，您必须固定滑块的高度，您可以这样做：

.w3-content {
  height: 700px;
  overflow: hidden;
}

或

.mySlides {
   height: 700px;
   overflow: hidden;
}

请记住，1000 像素对您没有帮助，因为有些图片的高度小于 1000 像素。您需要select最小高度作为固定高度；

Answer 4

编辑所有具有相同高度的图像，将解决您的问题。您可以在许多软件中编辑图像，最好的是 paint

Image Slider in css/Html