css：瀏覽器縮放時出現圖片問題

Question

我的網頁是「幻燈片風格」，由100％高度幻燈片組成。

<div id="slide1" class="whitepage"> 
    <div class="content"> 
    .... 
    </div> 
</div> 

<div id="slide2" class="blackpage"> 
    <div class="content"> 
    .... 
    </div> 
</div> 

等等。的CSS低於：

body{ 
text-align:center; 
height:100%; 
margin: 0 auto; 
} 

.whitepage{ 
height: auto; 
margin: 0 auto; 
background: white; 
min-height: auto; 
min-width: 1024px; 
color: black; 
border: 1px solid red; 
} 

.blackpage{ 
height: auto; 
margin: 0 auto; 
background: black; 
min-height: auto; 
min-width: 1024px; 
color: white; 
border: 1px solid blue; 
} 

.content{ 
position: relative; 
margin: 0 auto; 
text-align: center; 
min-height: 100%; 
min-width: 1024px; 
border: 1px dotted green; 
} 

利用該CSS以100％的高度各滑動負載（顯示可視區域）和它的確定。讓我們設想一下.content包含一個單獨的.png圖像。如果將瀏覽器縮小到150％或更多，或者如果我調整瀏覽器窗口的大小以使其更小（高度），則圖像會在下面的幻燈片中超出範圍，但我希望包含該圖像的頁面向下延伸以包含圖像正確。如果我在.content中使用通用文本而不是圖像，我可以得到這個結果。我究竟做錯了什麼？

Answer 1

我認爲你需要採取width=100%爲.content和在圖像中的高度和寬度應該存在。還可以在宮殿min-width處嘗試使用width。