HTML/CSS：如何使在 <section> 中包含 <img> 标签的 <div> 响应？

Question

我正在使用 fullPage.js 创建一个网站，在第二页（或等效的第二部分）我想实现一个非常简单的布局，其中我有一个固定在顶部的 header显示图像的页面应该是响应式的，或者随着 window 缩小而缩小但保持在顶部。

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

缩放 div 全屏

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

div 内的 img 标签有一个 class header-image，我将其设置为

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

但是，我没有得到想要的结果。在第二页的顶部有一个小的 space，我无法摆脱它。您可以看到我正在制作的网站以及源代码 HERE. 只需向下滚动到第二页，或者单击主页上的 Personal Details。

非常感谢您的帮助！

Answer 1

如果你只是把 height:100%; 给 .section2-container 会怎样？它能解决您的问题吗？

Answer 2

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

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

HTML/CSS: How to make a <div> containing an <img> tag inside a <section> responsive?