Responsive one page div images

I am trying to make a responsive one page layout for a wordpress landing page I am preparing. The HTML code I am using is this:

<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>

Each section is defined as a block element with the following css on .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;
}

the problem is when I am trying to resize the screen, it becomes image+white background due to .pf-fp’s height:100%; and the responsiveness of img. How do I achieve to have the one section per viewport on desktop – tablet – phone? even if it means to “blow up” the image a bit to fit in the viewport?