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

Question

Моя веб-страница «powerpoint style» состоит из 100% слайдов высотой один под другим.

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

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

и так далее. КСС ниже:

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.