背景图象在移动设备被炸毁 [英] background image is blown up on mobile device

问题描述

我已创建视差页。
在我的桌面上一切都很好，但如果我在移动设备上查看它的图像被炸了，到目前为止我可以计算像素。

I have created a parallax page. On my desktop everything works great but if I view it on a mobile device the image is blown up so far I can literally count the pixels.

不知道是什么原因造成的。
即使这样我也不知道如何解决这个问题。

I have no idea what causes this. Even so I have no idea how to fix this....

我甚至不知道从谷歌开始除了哪里。

I don't even know where to start besides Google. I found one topic where somebody states that this is a Safari issue.

任何人都有？

我不能真正创建一个JSFiddle或一些东西，因为，像你说的，它是在WordPress。

I can't really create a JSFiddle or something because, like you stated, it's made in WordPress.

但是请看附件的图像。也许有人可以看到至少问题在哪里，也许可以告诉我什么原因（全局指示）

桌面：

However please see the attached images. Maybe somebody can see at least where the problem lies and maybe tell me what causes this (global indication)
Desktop:

手机（iPhone）

Mobile (iPhone)

推荐答案

您可能想尝试将 background-size：cover 切换为 background-size：contains 。这将确保背景图像适合窗口内的宽度和高度，但可能会创建一些空白。有了封面，整个区域保证填充，但图像可能不完全包含，这似乎是现在发生了什么。

You might want to try swapping background-size:cover to background-size:contain. This will ensure the background image fits both its width and height within the window, but could create some blank space. With 'cover', the whole area is guaranteed to be filled, but the image might not be entirely contained which seems to be what's happening now.

这篇关于背景图象在移动设备被炸毁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！