Question

如何创建整页背景图像而不是拉伸（something like this）？

<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>

Pastebin 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>

Answer 1

如果你想动态地改变背景，我认为你必须使用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）

Answer 2

您也可以使用flash背景（图像为swf，可能会添加一些效果）。

http://webarto.com/kontakt

此外，您的图像必须以某种方式隔离，以免拉伸它。在PL网站上，图像在侧面涂成黑色，a由高度固定。

CSS整页背景缩放问题

2 个答案: