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



我遇到了一个问题。当我在电脑和手机上查看我的网站时,它构建得很完美;但是,当我在iPad上拉起它时,背景图像就像炸毁了一样。我的网站 http://www.zwdalpha.com/,任何帮助将不胜感激!另外,我的Github是 https://github.com/zcsmouse970/zwdalpha

要解决此问题,您首先需要了解正在发生的事情。背景图像大小由background-size属性处理,您当前已将其设置为covercover非常适合大屏幕,因为它确保图像"覆盖"元素的高度。这允许在侧面进行剪裁,以确保它从上到下填充。contain与此相反。它确保您可以随时看到整个图像。它通过确保宽度为 100% 并且高度留作剪辑或扩展来实现这一点。当您在平板电脑和较小的平板电脑上看到图像被"炸毁"时,CSS 会确保整个内容区域都填充图像,并且它通过确保图像的高度填充内容窗格来做到这一点。以下是我们更详细的地方。

您将图像设置为fixed。显然,这就是你想要的效果,但让我们想想这里需要发生什么。现在,图像需要从上到下覆盖屏幕,因为它可以在fixed时在内容窗格所在的任何地方查看。所以现在你的图像覆盖了整个视口。当您将其更改为background-attachment:scroll;时,您可以看到它所做的更改。相反,它将图像适合内容窗格而不是视区。

话虽如此,您可以更改此设置的方法是实现媒体查询并将背景切换到更适合观看尺寸的裁剪版本。

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

试试background-attachment: scroll

最新更新