背景圖片不是我的手機瀏覽器中正確顯示

我有在我的網站上的圖像問題不會在瀏覽器中正確顯示的畫面切入手機瀏覽器的某些領域背景圖片不是我的手機瀏覽器中正確顯示

這是圖像 desktop pc screen image image on a mobile browser

這是用於將圖像

section#landing { 
width: 100%; 
height: 100vh; 
background: url('../../img/bg.jpg'); 
background-size: cover; 

background-position: center; 
background-attachment: scroll;

}

代碼個

@media只有屏幕和（最大設備寬度：320像素）{

}

來源

2016-07-11 Thami sithole

第1步：查找的code you are using，看看什麼是應該做的事：

蓋與contains相反的關鍵字。儘量縮放圖像並保持圖像寬高比（圖像不會變形）。圖像「覆蓋」容器的整個寬度或高度。當圖像和容器具有不同的尺寸時，圖像將被剪裁成左/右或上/下。

那麼，它是剪裁圖像，你不想它剪輯圖像，所以清楚cover是錯誤的。

步驟2：再看其它選項：

包含該縮放圖像儘可能地大，並保持圖像的縱橫比（圖像沒有得到壓扁）的關鍵字。圖像在容器內是letterbox。當圖像和容器具有不同的尺寸時，空白區域（左側/右側的頂部/底部）會填充背景顏色。圖像自動居中，除非被另一個屬性（如background-position）覆蓋。

這可能會完成這項工作。

<百分比> 可以擴展在相應的尺寸，以背景區域的定位，這是由背景原點的值決定的指定百分比的背景圖像的值。默認情況下，背景定位區域是包含框內容和其填充的區域;該區域也可以更改爲內容或包含邊框，填充和內容的區域。如果背景的附件是固定的，則背景定位區域是瀏覽器窗口的整個區域，而不包括滾動條所覆蓋的區域（如果存在）。負面百分比是不允許的。

...或（與100% 100%），這取決於你真正想要的：

來源

2016-07-11 09:35:40 Quentin

感謝爲您提供幫助，幫助我修復切割移動瀏覽器某些區域的圖像，但現在我遇到的另一個問題是，圖像無法正確顯示在我的電腦屏幕中，現在它的居中位置，我希望它填充整個頁面頂部沒有顯示背景顏色 –

使用：'background-position：top center' or..wi th媒體查詢設置背景大小：封面上的電腦和包含移動 –

對不起，我忘了感謝您幫助解決我的問題您的解決方案，你給我工作非常感謝 –

看到這裏jsfiddle

不要使用cover，因爲這使得要裁剪的圖像，而不是使用contain還添加background-position:top center，因爲contain img調整大小，並且空的空格（頂部和底部）用background-color填充，在您的情況下爲transparent。所以最好對準BCK IMG頂部，並填寫任何你想要的

你可以用媒體查詢設置移動

代碼background-size:cover PC和contain底部區域：

section#landing { 
    width: 100%; 
    height: 100vh; 
    background: url('http://i.stack.imgur.com/fXmkE.jpg'); 
    background-size: contain; 
    background-repeat:no-repeat; 
    background-position: top center; 
    background-attachment: scroll; 

}

來源

2016-07-11 09:59:51

謝謝你的建議，他們真的幫助我 –

背景圖片不是我的手機瀏覽器中正確顯示

回答

相關問題