如何调整背景图像以适应 iPad 屏幕
How to Resize Background Images to fit iPad Screens
我 运行 遇到了问题。当我在计算机上查看我的网站时 phone，它构建得非常完美；但是，当我在 iPad 上拉起它时，背景图像就像被炸毁了一样。我的网站是 http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
您的问题似乎与背景附件有关：已修复未按预期运行。
尝试background-attachment: scroll
要解决这个问题，您首先需要了解发生了什么。背景图像大小由 background-size 属性处理，您当前已将其设置为 cover。 cover 非常适合大屏幕，因为它确保图像 "covers" 元素的高度。这允许在侧面进行裁剪以确保它从上到下填充。 contain 与此相反。它确保您始终可以看到整个图像。它通过确保宽度为 100% 并且高度留给裁剪或扩展来实现。当您在平板电脑和更小的设备上看到图像 "blown up" 时，CSS 确保整个内容区域都被图像填充，它通过确保图像的高度填充来实现这一点内容窗格。这是我们获得更详细信息的地方。
您的图像设置为 fixed。显然这就是您想要的效果，但让我们考虑一下这里需要发生什么。现在图像需要从上到下覆盖屏幕，因为在 fixed 时可以在内容窗格的任何位置查看它。所以现在你的图像覆盖了整个视口。当您将其更改为 background-attachment:scroll; 时，您可以看到它所做的更改。它反而使图像适合内容窗格而不是视口。
综上所述，您可以通过实施媒体查询并将背景切换为更适合观看尺寸的裁剪版本来改变这一点。
我 运行 遇到了问题。当我在计算机上查看我的网站时 phone，它构建得非常完美；但是，当我在 iPad 上拉起它时，背景图像就像被炸毁了一样。我的网站是 http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
您的问题似乎与背景附件有关：已修复未按预期运行。
尝试background-attachment: scroll
要解决这个问题，您首先需要了解发生了什么。背景图像大小由 background-size 属性处理，您当前已将其设置为 cover。 cover 非常适合大屏幕，因为它确保图像 "covers" 元素的高度。这允许在侧面进行裁剪以确保它从上到下填充。 contain 与此相反。它确保您始终可以看到整个图像。它通过确保宽度为 100% 并且高度留给裁剪或扩展来实现。当您在平板电脑和更小的设备上看到图像 "blown up" 时，CSS 确保整个内容区域都被图像填充，它通过确保图像的高度填充来实现这一点内容窗格。这是我们获得更详细信息的地方。
您的图像设置为 fixed。显然这就是您想要的效果，但让我们考虑一下这里需要发生什么。现在图像需要从上到下覆盖屏幕，因为在 fixed 时可以在内容窗格的任何位置查看它。所以现在你的图像覆盖了整个视口。当您将其更改为 background-attachment:scroll; 时，您可以看到它所做的更改。它反而使图像适合内容窗格而不是视口。
综上所述，您可以通过实施媒体查询并将背景切换为更适合观看尺寸的裁剪版本来改变这一点。