如何根據瀏覽器窗口大小調整div的大小？

我試圖做一個幻燈片，相對於瀏覽器窗口大小成比例調整大小，但我沒有嘗試似乎工作。以下HTML和CSS是我使用的，所以當瀏覽器窗口調整大小時，我的頁面上的幻燈片放映保持居中，但它尚未允許幻燈片顯示調整大小。如何根據瀏覽器窗口大小調整div的大小？

我該怎麼做呢？我原來的想法是簡單地給一個#parent div一個max-width或width某個百分比，但它不起作用。我認爲裏面的所有東西，因爲他們的寬度都設置爲100％，應該調整#parent股利，但他們沒有。我甚至不確定#parent div甚至可以調整大小...

img很簡單，我在我的實際代碼中有六個圖像的佔位符，但這沒有什麼區別。

#parent { 
 
\t height:100%; 
 
} 
 

 
.fadein { 
 
\t position:relative; 
 
\t top:70px; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
.fadein img { 
 
\t position:absolute; 
 
\t left:50%; 
 
\t top:50%; 
 
\t -webkit-transform: translate(-50%, -0%); 
 
\t -moz-transform: translate(-50%, -0%); 
 
} 
 

 
#slideshow { 
 
\t max-width:100%; 
 
\t width:100%; 
 
\t height:100%; 
 
}

<div id="parent"> 
 
\t \t \t 
 
\t <div id="slideshow"> 
 
\t \t \t 
 
\t \t <div class="fadein"> 
 
\t \t \t \t 
 
\t \t \t <img src="http://placehold.it/350x150" /> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t \t 
 
\t </div> 
 
\t \t \t \t 
 
</div>

來源

2015-11-10 T Corin

先放'邊界：1px的固體紅色;'所有元素實際上看是怎麼回事。還刪除最大寬度（不需要）。 –

父母永遠不會100％身高，如果我是對的，你應該在該元素上使用'position：fixed;'。並把寬度100％，以防萬一 –

@RensTillmann謝謝你的提示。我必須在某個時候添加最大寬度並將其遺忘。爲什麼父母不會100％身高？我嘗試了邊界的想法（到目前爲止只爲父div），並且只有頂部邊框可見... –

.fadein IMG不具有寬度設置爲100％。也因爲它是絕對定位的，寬度將指窗口的寬度。這不應該因爲你的父div被設置爲100％，所以兩種方式看起來都是一樣的。

編輯：同樣在將來當你遇到佈局問題時，在你的div上添加邊框真的很有用。正如在評論中提到

來源

2015-11-10 23:43:05 lucadem1313

沒有它的父母有親戚 –

@RensTillmann但是圖片沒有100％的寬度 – lucadem1313

沒錯，你是對的 –

對於height: 100%;是視的高度，你聽從會對所有元素height: 100%往上走，包括<html>和<body> ......很有可能，你最好使用固定覆蓋，測量100vh。您可以在vh設備上找到很好的信息，以及height: 100%的真實含義：Percentage Height HTML 5/CSS

來源

2015-11-10 23:44:46

您的img標籤是需要調整大小的設備。它將獨立於父容器行事。

#parent { 
 
\t height:100%; 
 
} 
 

 
.fadein { 
 
\t position:relative; 
 
\t top:70px; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
.fadein img { 
 
\t position:absolute; 
 
\t left:50%; 
 
\t top:50%; 
 
\t -webkit-transform: translate(-50%, -0%); 
 
\t -moz-transform: translate(-50%, -0%); 
 
} 
 

 
#slideshow { 
 
\t max-width:100%; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
#slideshow img { 
 
    width: 100%; 
 
}

<div id="parent"> 
 
\t \t \t 
 
\t <div id="slideshow"> 
 
\t \t \t 
 
\t \t <div class="fadein"> 
 
\t \t \t \t 
 
\t \t \t <img src="http://placehold.it/350x150" /> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t \t 
 
\t </div> 
 
\t \t \t \t 
 
</div>

來源

2015-11-10 23:57:17

#parent { 
height:200px; 
    width:300px; 
    position:relative; 
} 
#slideshow { 
    position:absolute; 
    left:0; 
    top:0; 
width:100%; 
height:100%; 
} 
.fadein { 
    position:fixed; 
    left:0; 
    top:0; 
width:100%; 
height:100%; 
} 
.fadein img { 
position:absolute; 
left:50%; 
top:50%; 
-webkit-transform:translate(-50%, -0%); 
-moz-transform:translate(-50%, -0%); 
    width:100%; 
    height:100%; 
}

來源

2015-11-11 00:10:47

如何根據瀏覽器窗口大小調整div的大小？

回答

相關問題