Question

所以我设法建立了一个我正在开发的新应用公司的网站，其中我使用了一个大图像，因为它更容易为我设置，但是当浏览器大小调整它时squishes 。是否有办法使图像缩放？这是我的index.html文件中的代码。非常感谢您的帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WeShould Inc</title>
<style type="text/css">

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>

<body>
    <div id="page-background"><img src="http://i.imgur.com/DJaWd.jpg" width="100%" height="100%" alt="Fireworks"></div>
    <div id="content">

    </div> */


</body>
</html>

Answer 1

试试这个：

<style type="text/css">
html { 
    background: url(http://i.imgur.com/DJaWd.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/DJaWd.jpg', sizingMethod='scale')";
</style>

这适用于所有浏览器，包括IE。

使用示例 - http://fiddle.jshell.net/FENXB/1/show/

如何制作固定的背景网站规模？

1 个答案: