Отзывчивая одна страница div images

Question

Я пытаюсь сделать отзывчивый макет страницы для целевой страницы wordpress, которую я готовлю. HTML код, я использую это:

<section id="panel-3" class="pf-fp" data-img="001.jpg"> 
<article> 
    <h1>Welcome #1</h1> 
    <nav> Item 1/Item 2/Item 3 </nav> 
</article> 
<img src="001.jpg"/> 
</section> 
<section id="panel-5" class="pf-fp" data-img="002.jpg"> 
<article> 
    <h1>Welcome #2</h1> 
    <nav> Item 1/Item 2/Item 3 </nav> 
</article> 
<img src="002.jpg"/> 
</section> 
... 
<section id="panel-9" class="pf-fp" data-img="003.jpg"> 
<article> 
    <h1>Welcome #n</h1> 
    <nav> Item 1/Item 2/Item 3 </nav> 
</article> 
<img src="003.jpg"/> 
</section> 

Каждая секция определяется как блочный элемент со следующим CSS на .pf-FP:

.pf-fp { 
width:100%; 
height:100%; 
position:relative; 
} 

.pf-fp article { 
z-index:1; 
position: absolute; 
left:0; right:0; bottom:0 top:0; 
display:block; 
color: white; 
} 

.pf-fp img { 
z-index:0; 
position:absolute; 
left:0; right:0; bottom:0 top:0; 
display:block; 
} 

проблема, когда я пытаюсь изменить размер на экране это изображение + белый фон из-за высоты .pf-fp: 100%; и отзывчивость img. Как добиться того, чтобы один раздел в окне просмотра на рабочем столе - планшетный телефон? даже если это означает «взорвать» изображение немного, чтобы оно поместилось в окне просмотра?

Answer 1

вы можете использовать адаптивный дизайн с размером экрана вы хотите, чтобы лечить

@media только экран и (мин-ширина: 1550px) {} только @media экран и (макс-ширина: 1449px) {}