CSS整頁背景縮放問題

如何製作整頁背景圖片並且沒有拉伸（something like this）？CSS整頁背景縮放問題

<html> 
<style> 
    html, body {height:100%;} 
    #background { 
    min-height:100%; 
    min-width:1024px; 
    width:100%; 
    height:auto; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:-1; 
    } 
    @media screen and (max-width: 1024px){ #background{left:50%;margin-left:-512px;}} 
</style> 

</head> 
<body> 
    <img id="background" src="http://www.iwallpapers.in/bulkupload/C/Mountains/Mountains%2040.jpg" alt="" /> 
</body> 
</html>

引擎收錄here

編輯：

上面的代碼可能說明我的目標更好。當你重新調整窗口的大小，例如400px時，你會得到empty space under the image。我希望圖像填滿整個窗口並保持其寬高比。

<!DOCTYPE html> 
<html lang="en"> 
<head><head> 
<title></title> 
<style> 
*{margin:0; padding:0;} 
#wrap{ 
    width:100%; 
    height:auto; 
    margin:0 auto; 
} 
#bg{ width:100%} 
</style> 
</head> 

<body> 
    <div id="wrap"> 
     <img src="http://www.bmwgallery.co.uk/bmw-motorcycles/bmw-s1000rr-superbike-motorcycle-large.jpg" id="bg" /> 
    </div> 
</div> 

</body> 
</html>

來源

2010-08-19 Eeyore

您示例頁面*中的背景*在一個大型顯示器上拉伸，您可以更具體一點嗎？ – 2010-08-19 22:26:20

'全頁面背景'是什麼意思？網站內容背後的HTML主體本身的背景？ – 2010-08-19 22:27:33

@Eeyore你的例子和你的代碼的工作方式完全一樣。他們拉伸形象。 – Frankie 2010-08-19 22:28:34

如果你想使背景動態變化，我認爲你必須使用JavaScript。如果你不想讓圖像扭曲，你必須使用一個維度，並保持長寬比，如：

<!doctype HTML> 
<html> 
<head> 
<style type = "text/css"> 
#backgroundDiv{position:absolute;} 
</style> 
<script type="text/javascript" language="JavaScript" src="jquery-1.4.2.min.js"></script> 
<script type ="text/javascript" language="JavaScript"> 
function resizeImg(){ 
     var h = parseInt($(document).height()) - 50; 
       var imgh = $("#bg-image").height(); 
       var imgw = $("#bg-image").width(); 
     $("#bg-image").height(h); 
     $("#bg-image").width(Math.floor(imgw*(h/imgh))); 
} 
$(document).ready(function(){ 
     resizeImg(); 
     $(window).resize(function(){ 
       resizeImg(); 
     }); 
}); 
</script> 
</head> 
<body> 
<div style = "height:100%;width:100%;" id = "backgroundDiv"><img src = "slider-image.jpg" id = "bg-image"></div> 
</body> 
</html>

希望這有助於！（嘗試調整圖像的z-index，如果你想在後臺製作）

來源

2010-08-19 22:48:59 KeatsKelleher

你也可以使用閃光背景（圖像爲SWF，也許增加一些效果）。

http://webarto.com/kontakt

此外，您的圖像必須以某種方式分離出來，爲了不舒展它。在PL網站上，圖像在兩側塗成黑色，a由高度固定。

來源

2010-08-19 22:49:44

它具有固定的高度，但您可以在螢火蟲中看到圖像的尺寸根據窗口大小而變化。 – Eeyore 2010-08-24 20:58:49

CSS整頁背景縮放問題

回答

相關問題