移动背景图片放大

问题描述：

我发现了这条线上的一些查询，他们要么没有解决方案，要么他们的解决方案对我不起作用。我设置了媒体查询，其中最小的是最大宽度（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标签如下：

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

你能提供的HTML以及你也可以做Android的一个体面的测试（还有更多），使用的浏览器工具，如Chrome的DevTools（（或链接到现有的网站。）如果你还没有尝试过。） – CreativeCreate

答

您overrulling错误的造型。在桌面样式您正在使用：

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;

我不认为-image需要在最后一个样式中，但不管如何，我将媒体查询更改为完整的后台快捷方式属性，现在我没有图像出现在移动设备上。我有三重检查文件名和一切匹配，所以我不知道我是否比以前更好或更糟。 – mrsjetset

现在在这里工作完美吗？不知道你的问题是什么。 http://imgur.com/G7JHQza – Wouter125

那么它开始工作，当我拿出固定的背景附件属性。我更喜欢它与之合作，但显然这是不可能的。 – mrsjetset

移动背景图片放大

相关推荐