背景放大过大

Question

我有我的英雄部分的背景图像。在某些屏幕上，背景图像非常适合。然而，在其他一些屏幕上，如我的iPhone，它真的太放大了。

我在堆栈溢出(如background-size:contain或background-size:100% )上尝试了解决方案，但最终得到了类似于重复3-4次的背景。下面是我的背景代码：

.bg-hero {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

​

​

Answer 1

更新最初的答案提出了背景-附件:修复的问题，这可能会在某些设置组合中造成问题。然而，在这种情况下，测试与不同的纵横比图像和留下的固定在我无法重现的问题，背景大小:封面工作在两个方向。现在，我将下面的信息放在这里，以防它有助于指出导致问题的原因。

原版：

问题可能在以下设置中：

.bg-hero {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

背景-附件:在IOS中不支持固定。这取决于它会导致什么版本，例如，过度拉伸的图像(尽管这个问题谈论的是放大而不是拉伸)。参见https://caniuse.com/?search=background-attachment，但是背景大小:掩护应该已经为您准备好了。

部分支持是指支持局部而非固定的

。

Answer 2

用于背景的图像的尺寸不适合于移动屏幕。您正在使用的图像具有景观方向。你可以做两件事：

1. 使用具有纵向方向的不同图像。并在CSS代码中添加媒体查询.

​

1. 这种方法可能不合适，但您可以尝试一下。与其使用图像作为背景，不如为背景使用相关的颜色(在本例中为棕色)，并在HTML中添加图像作为单独的元素。您可以再次使用媒体查询管理图像大小。并确保您的fixed.

图像元素为position

Answer 3

试试看最小高度和检查一个

.bg-hero {
        background-image: url('/img/background.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        min-height:100vh;
    }