I tend to make a division that width = window.innerWidth; height = width/5;
1/5 acturally is the background-image’s height/weith ratio.
So I write the code as below.
HTML:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
<META CHARSET="gb2312" />
<LINK REL="stylesheet" HREF="css/style.css" />
<SCRIPT TYPE="text/javascript">
function onload(){
//innerWidth of the window
var window_innerWidth;
//height of DIV#head
var head_height;
//DIV#head
var head_div;
//btn
var left_btn;
window_innerWidth=window.innerWidth;
head_height=window_innerWidth*120/600;
head_div=document.getElementById("head");
left_btn=document.getElementById("head_left_btn");
right_btn=document.getElementById("head_right_btn");
if(head_div&&left_btn){
head_div.width=window_innerWidth;
head_div.height=head_height;
alert(window_innerWidth+ " " +head_height + " " + head_div.height
+ " " + left_btn.height);
}
}
</SCRIPT>
</HEAD>
<BODY onload="onload();">
<DIV ID="head">
<BUTTON ID="head_left_btn" class="btn_hide" TYPE="button"></BUTTON>
<BUTTON ID="head_right_btn" class="btn_hide" TYPE="button"></BUTTON>
</DIV>
</BODY>
</HTML>
CSS:
#head{
background-image: url('../img/basic_.jpg');
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.btn_hide{
width: 49.5%;
height: 100%;
opacity: 0.5;
}
The img I use as background is 600px*120px
What I am exactly doing is trying to make a head tabs. The problem is that while the width of the division goes right with javascript, the height doesn’t. Though the output from alert shows the value of the height is right, the display of the page is not. Can anyone help here? Many thanks!
Try this: