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

Question

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

Answer 1

要解决这个问题，首先需要了解发生了什么。使用background-size属性处理背景图片尺寸，您当前将其设置为cover。 cover非常适合大屏幕，因为它可以确保图像“覆盖”元素的高度。这允许在侧面剪裁以确保其从顶部到底部填充。 contain与此相反。它确保您可以随时查看整个图像。它通过确保宽度为100％并保持剪裁或展开高度来实现此目的。当您在平板电脑上看到图像被“炸毁”时，CSS会确保整个内容区域都填满图像，并通过确保图像的高度填充内容窗格来实现此目的。这是我们更详细的地方。

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

所有这些，您可以通过实施媒体查询和将背景切换为更适合观看尺寸的裁剪版本来实现这一点。

Answer 2

您的问题似乎与背景附件有关：修复后的行为不符合预期。

尝试background-attachment: scroll