如何讓窗口大小和設備的css背景圖像比例尺

我想設置一個流體模板，我也可以用於響應式設計視口。但是現在，當我嘗試調整瀏覽器窗口的大小時，它不能縮放，並且在我的iPhone上我只看到了標題圖形的左上角部分。我有一個主包裝背景和頭部動畫gif，都是1200px的相同寬度。任何幫助將不勝感激。如何讓窗口大小和設備的css背景圖像比例尺

視口

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

CSS

body { 
    background-color: #B28D66; 
    margin: 0 auto; 
} 
#Wrapper { 
    max-width:1200px; 
    width:95%; 
    background-image: url(../img/background_main.jpg); 
    background-repeat: no-repeat scroll; 
    background-position: center top; 
    height: 2200px; 
    position: relative; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Banner { 
    width: 100%; 
    height: 350px; 
    background-image: url(../img/animated-gif-header.gif); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Content { 
    width: 75%; 
    margin: 0 auto; 
} 
#Wrapper #MainNav { 
    background-image: url(../img/nav_bar.png); 
    width: 100%; 
    height: 75px; 
    margin-top: -20px; 
} 
#Wrapper #MainNav ul { 
    margin-right: 100px; 

} 

#Wrapper #MainNav ul li { 
    float: right; 
    margin-top: 15px; 
    padding-right: 21px;

來源

2013-03-23 Djacksway

您是否嘗試過用媒體查詢向手機提供不同的圖像？這是不現實的，相同的圖像將完美地填充1400px寬的筆記本電腦屏幕和320px iphone屏幕。 – staypuftman 2014-04-21 04:50:21

嘗試使用以下方式的背景尺寸屬性：

背景尺寸：100％自動;

，或者如果你想擁有它的高度覆蓋整個頁面高度使用下面

背景尺寸：汽車100％;

來源

2013-03-23 15:03:42

background-size: cover;

作品對我蠻好。

來源

2013-12-09 06:39:57

background-image: url(''); 
background: no-repeat center center cover;

這通常工作正常。

來源

2014-05-21 10:30:50

如何讓窗口大小和設備的css背景圖像比例尺

回答

相關問題