CSS:浏览器缩放时的图像出现问题

Question

我的网页是"PowerPoint样式"，由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。