Question

我正在处理我的投资组合，并且我已经设置了它以便我有一些背景图像。它在我测试过的所有计算机上看起来都很棒，但是在我看到的只有iPhone和iPad等移动设备上的像素之前，图片就会被炸毁（还没有能够测试其他设备，但我确实测试过chrome和safari）。当我在chrome上进行移动视图时，它看起来也很好。

我发现this post似乎与我的问题最接近，但解决方案对我没有帮助。正如最高响应者所说，我可以将background-size更改为contain，但我会在侧面看到那些白条，这不是我想要的。

我无法在移动设备上执行任何检查元素，因此如何确定问题所在？

这是我的网站：www.julianbossiere.com

这是我用于横幅图片的CSS：

#banner-about {
    background-image: url(../img/desktop.jpg);
}

#banner-contact {
    background-image: url(../img/sunset.jpg);
}

#banner-about, #banner-contact {
    height: 60vh;
}

#banner-about, #banner-contact, #image-home {
    transition: height 0.8s;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#image-home {
    height: 100vh;
    background-image: url(../img/julian-rooftop.jpg);
}

谢谢！

在移动设备上放大的背景图片

0 个答案: