Javascript CSS整页背景缩放问题_Javascript_Html_Css

Javascript CSS整页背景缩放问题

javascript html css

Javascript CSS整页背景缩放问题,javascript,html,css,Javascript,Html,Css,如何制作一个完整的页面背景图像而不拉伸它巴斯德宾编辑：上面的代码可以更好地说明我的目标。当你把窗口调整到400像素的时候。我希望图像填充整个窗口并保持其纵横比 <!DOCTYPE html> <html lang="en"> <head><head> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; he

如何制作一个完整的页面背景图像而不拉伸它

巴斯德宾

编辑：

上面的代码可以更好地说明我的目标。当你把窗口调整到400像素的时候。我希望图像填充整个窗口并保持其纵横比

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

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

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

此外，你的图像必须以某种方式隔离，以避免拉伸。

PL站点上的图像在侧面涂成黑色，a由高度固定。

示例页面中的背景在一个大显示器上拉伸，您能更具体一点吗？您所说的“整页背景”是什么意思？HTML正文本身的背景是“隐藏”网站内容的吗？@e您的示例和代码的工作方式完全相同。他们拉伸图像。我所说的不拉伸bg图像的意思是保持纵横比，但同时填充整个窗口。就像我提供的示例链接一样。如果你不想更改纵横比，你必须缩放和剪裁，因为我可以更改浏览器窗口的纵横比。它有一个固定的高度，但你可以在firebug中看到图像的尺寸随窗口的大小而变化。

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