移動背景圖片放大

我發現了這條線上的一些查詢，他們要麼沒有解決方案，要麼他們的解決方案對我不起作用。我設置了媒體查詢，其中最小的是最大寬度（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">

來源

2016-04-02 mrsjetset

你能提供的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;

來源

2016-04-04 14:03:49 Wouter125

我不認爲-image需要在最後一個樣式中，但不管如何，我將媒體查詢更改爲完整的後臺快捷方式屬性，現在我沒有圖像出現在移動設備上。我有三重檢查文件名和一切匹配，所以我不知道我是否比以前更好或更糟。 – mrsjetset

現在在這裏工作完美嗎？不知道你的問題是什麼。 http://imgur.com/G7JHQza – Wouter125

那麼它開始工作，當我拿出固定的背景附件屬性。我更喜歡它與之合作，但顯然這是不可能的。 – mrsjetset

移動背景圖片放大

回答

相關問題