放大的移动背景图像

Question

我在这条线上找到了几个查询，他们要么没有解决方案，要么他们的解决方案对我不起作用。我设置了媒体查询，最小的是最大宽度（700px），当我在桌面上预览网站时，我的浏览器设置为 iPhone 的宽度，预览效果很好。但是，当在我的实际 iPhone 上预览时，它只显示照片的一小部分。 （在 Safari 和 Chrome 中。）我不确定 Android 设备，因为我没有要测试的设备。

编辑：http://www.dragonflyav.com 的完整站点

这是 CSS：

  @media (max-width: 700px) {
    .intro {
        background-image: url("images/backgrounds/fleet-top-770.jpg"); 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 75vh;
    }

我确定我遗漏了一些简单的东西，我已经尝试了上述的几种变体，包括单独放弃每个不同的属性，但没有运气。我的 HTML 元标记如下：

        <meta name="viewport" content="width=device-width" content="initial-scale-1">

Answer 1

您推翻了错误的样式。在您使用的桌面样式上：

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;

以及您正在使用的响应式：

background-image: url("images/backgrounds/fleet-top-770.jpg"); 

这样您将在响应式图像上方看到桌面图像。仅使用一个背景属性将为您解决问题。所以我个人会坚持：

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;