width = window.innerWidth; height = width/5;
私は、実際には1/5が背景画像の高さ/高さの比率であるという除算を行う傾向があります。だから私は以下のようにコードを書きます。
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;
}
背景として使用する画像は600px*120pxです
私が正確にやっていることは、ヘッドタブを作ろうとしていることです。問題は、分割の幅はjavascriptで正しくなりますが、高さは正しくないことです。アラートからの出力は高さの値が正しいことを示していますが、ページの表示は正しくありません。誰かがここで助けることができますか？どうもありがとう！