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整页背景缩放问题

回答

相关问题