css - 如何使用 fullpage.js 获取背景(封面)图像以调整大小并适合浏览器宽度？

Question

我希望你能帮助我，我被这个问题困住了。

此处示例:http://myko.dk/pegasus/index.html (进行中)

我想让背景图像自动调整大小以适合浏览器宽度。现在，如您所见，图像在调整大小时被裁剪了。我仍在学习编码，我可能搞砸了 css，并且使用 fullpage.js 也一直很困惑。

实际上，我认为“background-size:cover”会自动调整大小 - 有人愿意详细说明一下吗？

提前致谢

Answer 1

background-size:cover 是执行此操作的正确方法。

您的实现存在一些问题:

• 同一元素(照片和 Logo )上有多个背景图像。您应该在这个元素上使用cover(正如您正在做的那样)，因此您需要将 Logo 放在不同的元素上(否则它也会调整大小)

• 您当前设置 background-size: cover; 的位置正在被您的 background: 属性覆盖。您可以通过在 background: 之后立即包含 background-resize 或将当前的 background-size: cover; 更改为 background-size: cover !important;

• 除非您需要良好的向后浏览器支持(早于 IE 9)，否则您不需要为此使用 js。

有关详细信息，请参阅 MDN .