HTML / CSS：如何在<section>响应中创建一个包含<img/>标记的<div>？

Question

我正在使用fullPage.js创建一个网站，在第二页（或者相当于第二部分）我想要实现一个非常简单的布局，我在页面顶部修复了一个标题，显示了一个图像当窗口缩小但保持在顶部时，应该响应或减小尺寸。

目前，我正在包装要在div中显示的图像。然后我使用，

缩放div全屏

.post-header {
  background: #22BDA0;
  max-width: 100%;
  height: auto;
}

img内的div标记有一个我设为的类header-image，

.post-header .header-image {
    max-width: 100%;
    height: auto;
    margin: 0;
}

然而，我没有得到理想的结果。第二页顶部有一个小空间，我无法摆脱。您可以看到我正在制作的网站以及源代码HERE.只需向下滚动到第二页，或点击首页上的Personal Details即可。

非常感谢您的帮助！

Answer 1

如果您将height:100%;提交给.section2-container怎么办？它会解决你的问题吗？

Answer 2

从display: table-cell;删除.fp-tableCell，填充消失。这是否需要将显示设置为table-cell？

fullPage.js有一个选项：verticalCentered，可以设置为false。这似乎是一个很好的解决方案，因为替代方法总是试图确保包含元素的内容始终是100％。