Question

我有html页面，背景图片和按钮，当我调整浏览器窗口大小时，背景适合但按钮没有。我想通过更改屏幕或浏览器窗口更改调整大小按钮，你能帮帮我吗？感谢所有人。

的index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post</title>
</head>

<body>
<div>
<table cellspacing="0"  cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<input type="submit" value="Click" class="butt" onclick="dosomething();"/>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}

.butt {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #3c4fd9;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    float: left;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

.butt:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
.butt:active {
    position:relative;
    top:1px;
}
.butt{

    position: fixed;
    top: 40%;
    left: 39%;
    z-index: 1;


}

/*#content{position:absolute;left:-39%; top:-40%; z-index:70; height:100%; width:100%;}*/

</style>

<script type="text/javascript">
//$(window).resize(function() {
  //$(window).height(); 
  //$(window).width(); 
  //});
//get dimensions 
//var height = $(window).height();
//var width = $(window).width();
//refresh on resize
//$(window).resize(function() {
//$("#butt").css("height", "20px");
//$("#butt").css("width", "20px");
//});

</script>
</body>
</html>

的style.css

html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
<!--[if IE 6]>

html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}


<![endif]-->

http://i077.radikal.ru/1306/59/34317431d5ad.jpg图片

Answer 1

按百分比给出按钮宽度。

Answer 2

使用相对测量（例如百分比）来指定宽度，而不是像像素一样固定的东西。

Answer 3

如果在调整页面大小时更改基本字体大小，则以每美分为单位设置填充，可能以每美分为单位设置字体大小

通过更改屏幕分辨率调整大小按钮

3 个答案: