Question

我的网页是“powerpoint style”，由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而在图像中应该存在高度和宽度。另请尝试在width宫殿使用min-width。

css：浏览器缩放时图像问题

1 个答案: