背景太放大

Question

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

我尝试过 Stack Overflow 上的解决方案，例如 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

UPDATE 最初的答案提出了背景附件的问题：已修复，这可能会导致某些设置组合出现问题。但是，在这种情况下，使用不同纵横比的图像进行测试并保持固定在我无法重现问题，背景大小：封面在两个方向上都有效。我暂时将以下信息留在这里，以防它有助于指出导致问题的原因。

原文：

问题可能出在这些设置中：

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

background-attachment: IOS 不支持fixed。取决于它可能导致的版本，例如过度拉伸的图像（尽管这个问题谈论的是放大而不是拉伸）。参见 https://caniuse.com/?search=background-attachment，但 background-size: cover 应该已经为您解决了。

<块引用>

部分支持是指支持本地但不固定

Answer 2

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

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

2. 这种方法可能不合适，但您可以尝试一下。不要使用图像作为背景，而是使用相关的背景颜色（如本例中的一些棕色阴影），并将图像作为单独的元素添加到 HTML 中。您可以再次使用媒体查询管理图像的大小。并确保将 position 图像元素设为 fixed。

Answer 3

尝试 min-height 并检查一个

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