擬合圖像尺寸

我有一個像擬合圖像尺寸

<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>

div標籤這個div與CSS像

#MainMenu1 
{ 
height:53px; 
background: url(../images/top_banner.png) no-repeat; 
background-position:center; 
margin:auto; 
width:100%; 
border:0; 
}

我看到背景圖像是一個較小的屏幕上精細有關，但在更寬的屏幕上，它只佔據中心位置。即使在更寬的屏幕上，我也希望圖像佔據全屏，並且我不希望圖像「重複」。我該怎麼做？

來源

2013-04-04 Prasanna

如果你採取後臺位置：center;關閉CSS？ – Chin 2013-04-04 10:09:24

@Chin如果我刪除中心，圖像與左邊對齊。 – Prasanna 2013-04-04 11:29:07

你可以讓圖像重複覆蓋整個空間或使用background-size: cover，它將縮放它覆蓋整個區域，同時保持圖像的原始高寬比。

來源

2013-04-04 10:13:42

這適用於Mozilla。但我想在IE8中。忘了在問題中指出這一點。 – Prasanna 2013-04-04 11:28:24

然後使用更大的圖像？我不知道有什麼方法可以在IE9之前完成，而無需重複。 – 2013-04-04 12:09:14

#MainMenu1 
{ 
height:53px; 
margin:auto; 
width:100%; 
border:0; 
background: url(../images/top_banner.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

試試這個。它對我來說非常合適。它應該完美地適應中心的背景，併合理地將其延伸至網站正在瀏覽的任何屏幕大小。

來源

2013-04-05 18:31:12 edwoollard

擬合圖像尺寸

回答

相關問題