如何调整背景图像以适应iPad屏幕

Question

我遇到了问题。当我在电脑和手机上查看我的网站时，它的构建非常完美;但是，当我在iPad上拉起它时，背景图像就像炸毁了一样。我的网站是http://www.zwdalpha.com/，任何帮助将非常感谢！此外，我的Github是https://github.com/zcsmouse970/zwdalpha

Answer 1

您的问题似乎是与background-attachment：fixed不符合预期的行为。

尝试background-attachment: scroll

Answer 2

为了解决这个问题，首先需要明白发生了什么。背景图像尺寸使用background-size属性进行处理，您现在将其设置为cover。 cover适用于大屏幕，因为它确保图像“覆盖”了元素的高度。这允许在侧面裁剪以确保它从上到下填充。 contain与此相反。它确保您可以随时看到整个图像。它通过确保宽度为100％并将高度留给剪辑或展开来完成此操作。当你在平板电脑上看到图像被“爆炸”时，CSS会确保整个内容区域充满了图像，并通过确保图像的高度填充内容窗格来实现。这里是我们更详细的地方。

您的图像设置为fixed。很明显，这是你想要的效果，但让我们考虑一下这里需要发生什么。现在图像需要从上到下覆盖屏幕，因为它可以在fixed的内容窗格的任何位置查看。所以现在你的图像覆盖了整个视口。当您将其更改为background-attachment:scroll;时，您可以看到它所做的更改。它将图像放入内容窗格而不是视口。

所有这一切，你可以改变这种方式是通过实现媒体查询和背景切换到更适合观看尺寸的裁剪版本。