响应式一页 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的响应能力。如何在台式机-平板电脑-手机上实现每个视口的一个部分？即使这意味着将图像“放大”一点以适应视口？

Answer 1

您可以将响应式设计用于您想要处理的屏幕尺寸

@media 仅屏幕和（最小宽度：1550 像素）{} @media only screen and (max-width : 1449px){}