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像素。您需要選擇最小高度作爲固定高度;