响应单页div图像

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>

每一节都被定义为一个块元素，在.pf-fp上使用以下css：

.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的响应性，它变成了image+white背景。如何在台式机-平板电脑-手机上实现每个视区一个部分？即使这意味着要将图像“放大”一点以适应视口？

Answer 1

您可以使用响应式设计来处理您想要处理的屏幕大小

@纯媒体屏幕和(最小宽度: 1550px){} @仅媒体屏幕和(最大宽度: 1449px){}