css/Html中的图像滑块

Question

我创建了一个包含图像滑块的网站。 但我的所有图片都是不同的大小，所以当图片改变时，页面也滚动... 请帮我解决它。 我正在提供演示的链接。 Click here for Demo通过减少浏览器的大小访问更好。

Answer 1

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

Answer 2

您可以添加

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

到您的样式，但请注意，这将裁剪您的图像，如果他们是比1000像素更高，如果他们是短会留下空白的下方。您可以使用任何值而不是1000px。

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

Answer 3

要解决你的问题，你需要使用一致的图像大小 - 这将解决高度问题。只需创建500px×500px的5幅图像并将其用于所有幻灯片。 如果你想要有不同大小的每个图像，你需要有“白色边框”或不同的高度。

Answer 4

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

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

或者

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

记住1000像素并不能帮助你，因为一些图像HASE高度小于1000像素。您需要选择最小高度作为固定高度;