Question

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

修改：http://www.dragonflyav.com

的完整网站

这里是CSS：

＆＃13;

  @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;
    }

＆＃13;

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

＆＃13;

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

＆＃13;

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;

移动背景图片放大

1 个答案: