CSS: проблема с изображениями при увеличении браузера

Моя веб-страница - "стиль 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. Что я делаю не так?