背景圖片在瀏覽器上顯示不全，甚至在手機上顯示最差

我的主背景圖片適應屏幕分辨率，但圖片在過程中被截斷，因此您看不到完整圖片。背景圖片在瀏覽器上顯示不全，甚至在手機上顯示最差
圖片是更壞移動/平板電腦（甚至切斷）

如何顯示的全貌，它適應每一個瀏覽器/手機/平板電腦的全屏幕解析度？

我甚至不確定在哪裏修改編碼。

這段代碼可能是問題嗎？

* 28.0 Section 
 
*/ 
 

 
.magee-section { 
 
    position: relative; 
 
    -webkit-background-size: cover; 
 
    -ms-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.fullheight { 
 
    min-height: 100vh; 
 
} 
 

 
.verticlemiddle { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.magee-section.verticlemiddle .container, 
 
.magee-section.verticlemiddle .container-fullwidth { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.magee-section .background-media, 
 
.magee-section .background-overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
.magee-section .background-media { 
 
} 
 

 
.magee-section .background-overlay { 
 
} 
 

 
.magee-section .container, 
 
.magee-section .container-fullwidth { 
 
    position: relative; 
 
    overflow: hidden; 
 
}

來源

2016-03-28 frankmista

我不確定你在問什麼。沒有圖像會完美填充每一個屏幕寬高比，沒有一些失真或裁剪。你想解決什麼問題？ – aaronburrows

我有一個網站（這是一個尋呼機的網站），我想擁有的

全屏背景...現在我有一個完整的畫面，但它似乎是編碼在由放大，以便使它適合...在瀏覽器上它不是一個縮放太糟糕，但在移動設備上，它會變得非常糟糕......可能不得不改變「第1節」的.php文件？我現在無言以對...網站是：[www.landrycarts.com]如果你嘗試在手機上打開它，你會明白我的意思 – frankmista

body { 
    background: url("a.jpg") no-repeat center center fixed; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

，不要忘了加視在HEAD：

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

這裏是小提琴：https://jsfiddle.net/668j8xr8/

來源

2016-03-28 15:53:45 Naramsim

請檢查此鏈接，它一定會幫助你：http://www.w3schools.com/css/css_rwd_images.asp

來源

2016-03-28 15:58:57

背景圖片在瀏覽器上顯示不全，甚至在手機上顯示最差

回答

相關問題